@cube-dev/ui-kit 0.199.1 → 0.200.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

package/dist/components/content/Layout/LayoutContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContainer.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useCombinedRefs","extractStyles","LayoutContextReset","ContainerElement","as","qa","styles","display","flow","flexGrow","flexShrink","placeItems","placeContent","overflow","scrollbar","padding","placeSelf","border","Inner","$","boxSizing","width","CubeLayoutContainerProps","children","innerStyles","innerRef","HTMLDivElement","innerProps","LayoutContainer","props","ref","_c","innerStylesProp","innerRefProp","otherProps","hasInnerStyles","Object","keys","length","finalStyles","combinedInnerRef","T0","t0","eventProps","t1","t2","t3","_LayoutContainer","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps, ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = mergeStyles(\n    styles,\n    hasInnerStyles ? { Inner: innerStyles } : null,\n  );\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;AAgBA,MAAMc,mBAAmBR,MAAM;CAC7BS,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,YAAY;EACZC,YAAY;EACZC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,QAAQ;GACN,IAAI;GACJ,gBAAgB;EAClB;EAEAC,OAAO;GACLC,GAAG;GACHH,WAAW;GACXT,SAAS;GACTC,MAAM;GACNY,WAAW;GACXC,OAAO;GACPZ,UAAU;GAEV,uBAAuB;EACzB;CACF;AACF,CAAC;AAeD,SAAAmB,gBAAAC,OAAAC,KAAA;CAAA,MAAAX,IAAAY,EAAA,EAAA;CAIE,MAAA,EAAAR,UAAAjB,QAAAkB,aAAAQ,iBAAAP,UAAAQ,cAAAN,YAAA,GAAAO,eAOIL;CACJ,MAAAL,cAAoBvB,cAClBiC,YACA5C,kBACA0C,eACF;CAEA,MAAAG,iBAAuBC,OAAMC,KAAMb,WAAW,CAAC,CAAAc,SAAU;CAEzD,MAAAC,cAAoB9C,YAClBa,QACA6B,iBAAA,EAAAjB,OAA0BM,YAAmB,IAA7C,IACF;CAEA,MAAAgB,mBAAyBxC,gBAAgBiC,YAAY;CAGlD,MAAAQ,KAAAtC;CAEK,MAAAuC,KAAAlD,gBAAgB0C,YAAY,EAAAS,YAAc,KAAK,CAAC;CAAC,IAAAC;CAAA,IAAAzB,EAAA,OAAAI,UAAA;EAInDqB,KAAA,oBAAC,oBAAD,EAAqBrB,SAAF,CAAA;EAAgCJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,OAAAqB,oBAAArB,EAAA,OAAAQ,cAAAR,EAAA,OAAAyB,IAAA;EADrDC,KAAA,oBAAA,OAAA;GAAUL,KAAAA;GAA+B,gBAAA;GAAO,GAAKb;GACnDiB,UAAAA;EACI,CAAA;EAAAzB,EAAA,KAAAqB;EAAArB,EAAA,KAAAQ;EAAAR,EAAA,KAAAyB;EAAAzB,EAAA,KAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,OAAAsB,MAAAtB,EAAA,OAAAoB,eAAApB,EAAA,OAAAW,OAAAX,EAAA,OAAAuB,MAAAvB,EAAA,QAAA0B,IAAA;EAPRC,KAAA,oBAAC,IAAD;GACOhB;GAAG,GACJY;GACIH,QAAAA;GAERM,UAAAA;EALe,CAAA;EAQE1B,EAAA,KAAAsB;EAAAtB,EAAA,KAAAoB;EAAApB,EAAA,KAAAW;EAAAX,EAAA,KAAAuB;EAAAvB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OARnB2B;AAQmB;AAIvB,MAAMC,mBAAmBlD,WAAW+B,eAAe;AAEnDmB,iBAAiBC,cAAc"}
+{"version":3,"file":"LayoutContainer.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useCombinedRefs","extractStyles","LayoutContextReset","ContainerElement","as","qa","styles","display","flow","flexGrow","flexShrink","placeItems","placeContent","overflow","scrollbar","padding","placeSelf","border","Inner","$","boxSizing","width","CubeLayoutContainerProps","children","innerStyles","innerRef","HTMLDivElement","innerProps","LayoutContainer","props","ref","_c","innerStylesProp","innerRefProp","otherProps","hasInnerStyles","Object","keys","length","finalStyles","combinedInnerRef","T0","t0","eventProps","t1","t2","t3","_LayoutContainer","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps, ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = mergeStyles(\n    styles,\n    // oxlint-disable-next-line tasty/no-runtime-styles-mutation -- forwards the consumer's `innerStyles` and container style props to `Inner`\n    hasInnerStyles ? { Inner: innerStyles } : null,\n  );\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;AAgBA,MAAMc,mBAAmBR,MAAM;CAC7BS,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,YAAY;EACZC,YAAY;EACZC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,QAAQ;GACN,IAAI;GACJ,gBAAgB;EAClB;EAEAC,OAAO;GACLC,GAAG;GACHH,WAAW;GACXT,SAAS;GACTC,MAAM;GACNY,WAAW;GACXC,OAAO;GACPZ,UAAU;GAEV,uBAAuB;EACzB;CACF;AACF,CAAC;AAeD,SAAAmB,gBAAAC,OAAAC,KAAA;CAAA,MAAAX,IAAAY,EAAA,EAAA;CAIE,MAAA,EAAAR,UAAAjB,QAAAkB,aAAAQ,iBAAAP,UAAAQ,cAAAN,YAAA,GAAAO,eAOIL;CACJ,MAAAL,cAAoBvB,cAClBiC,YACA5C,kBACA0C,eACF;CAEA,MAAAG,iBAAuBC,OAAMC,KAAMb,WAAW,CAAC,CAAAc,SAAU;CAEzD,MAAAC,cAAoB9C,YAClBa,QAEA6B,iBAAA,EAAAjB,OAA0BM,YAAmB,IAA7C,IACF;CAEA,MAAAgB,mBAAyBxC,gBAAgBiC,YAAY;CAGlD,MAAAQ,KAAAtC;CAEK,MAAAuC,KAAAlD,gBAAgB0C,YAAY,EAAAS,YAAc,KAAK,CAAC;CAAC,IAAAC;CAAA,IAAAzB,EAAA,OAAAI,UAAA;EAInDqB,KAAA,oBAAC,oBAAD,EAAqBrB,SAAF,CAAA;EAAgCJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,OAAAqB,oBAAArB,EAAA,OAAAQ,cAAAR,EAAA,OAAAyB,IAAA;EADrDC,KAAA,oBAAA,OAAA;GAAUL,KAAAA;GAA+B,gBAAA;GAAO,GAAKb;GACnDiB,UAAAA;EACI,CAAA;EAAAzB,EAAA,KAAAqB;EAAArB,EAAA,KAAAQ;EAAAR,EAAA,KAAAyB;EAAAzB,EAAA,KAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,OAAAsB,MAAAtB,EAAA,OAAAoB,eAAApB,EAAA,OAAAW,OAAAX,EAAA,OAAAuB,MAAAvB,EAAA,QAAA0B,IAAA;EAPRC,KAAA,oBAAC,IAAD;GACOhB;GAAG,GACJY;GACIH,QAAAA;GAERM,UAAAA;EALe,CAAA;EAQE1B,EAAA,KAAAsB;EAAAtB,EAAA,KAAAoB;EAAApB,EAAA,KAAAW;EAAAX,EAAA,KAAAuB;EAAAvB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OARnB2B;AAQmB;AAIvB,MAAMC,mBAAmBlD,WAAW+B,eAAe;AAEnDmB,iBAAiBC,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";
@@ -49,8 +49,9 @@ const ContentElement = tasty({
 		},
 		ScrollbarV: {
 			$: ">",
+			"$scrollbar-inset": "1px",
 			position: "absolute",
-			right: "1px",
+			right: "$scrollbar-inset",
 			top: "$scrollbar-v-top",
 			width: "1ow",
 			height: "$scrollbar-v-height",
@@ -60,13 +61,14 @@ const ContentElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ScrollbarH: {
 			$: ">",
+			"$scrollbar-inset": "1px",
 			position: "absolute",
-			bottom: "1px",
+			bottom: "$scrollbar-inset",
 			left: "$scrollbar-h-left",
 			height: "1ow",
 			width: "$scrollbar-h-width",
@@ -76,7 +78,7 @@ const ContentElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		}
 	}
@@ -97,19 +99,19 @@ function LayoutContent(props, ref) {
 		$[0] = t1;
 	} else t1 = $[0];
 	const { hoverProps, isHovered } = useHover(t1);
-	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const { handleVTokens, handleHTokens, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
 	let t2;
-	if ($[1] !== handleHStyle || $[2] !== handleVStyle || $[3] !== isTinyScrollbar) {
+	if ($[1] !== handleHTokens || $[2] !== handleVTokens || $[3] !== isTinyScrollbar) {
 		t2 = isTinyScrollbar ? {
-			...handleVStyle,
-			...handleHStyle
-		} : {};
-		$[1] = handleHStyle;
-		$[2] = handleVStyle;
+			...handleVTokens,
+			...handleHTokens
+		} : void 0;
+		$[1] = handleHTokens;
+		$[2] = handleVTokens;
 		$[3] = isTinyScrollbar;
 		$[4] = t2;
 	} else t2 = $[4];
-	const scrollbarStyle = t2;
+	const scrollbarTokens = t2;
 	let t3;
 	if ($[5] !== externalMods || $[6] !== isHovered || $[7] !== isScrolling || $[8] !== scrollbar) {
 		t3 = {
@@ -162,14 +164,14 @@ function LayoutContent(props, ref) {
 		$[21] = t8;
 	} else t8 = $[21];
 	let t9;
-	if ($[22] !== T0 || $[23] !== combinedRef || $[24] !== finalStyles || $[25] !== hoverProps || $[26] !== mods || $[27] !== scrollbarStyle || $[28] !== t4 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
+	if ($[22] !== T0 || $[23] !== combinedRef || $[24] !== finalStyles || $[25] !== hoverProps || $[26] !== mods || $[27] !== scrollbarTokens || $[28] !== t4 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			ref: combinedRef,
 			...t4,
 			...hoverProps,
 			mods,
 			styles: finalStyles,
-			style: scrollbarStyle,
+			tokens: scrollbarTokens,
 			children: [
 				t6,
 				t7,
@@ -181,7 +183,7 @@ function LayoutContent(props, ref) {
 		$[24] = finalStyles;
 		$[25] = hoverProps;
 		$[26] = mods;
-		$[27] = scrollbarStyle;
+		$[27] = scrollbarTokens;
 		$[28] = t4;
 		$[29] = t6;
 		$[30] = t7;

package/dist/components/content/Layout/LayoutContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContent.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","Mods","OUTER_STYLES","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useRef","useHover","useCombinedRefs","extractStyles","useTinyScrollbar","LayoutContextReset","ContentElement","as","qa","styles","container","position","display","gridColumns","gridRows","placeContent","placeItems","placeSelf","flexGrow","flexShrink","height","overflow","boxSizing","border","Inner","$","flow","padding","scrollbar","ScrollbarV","right","top","width","radius","fill","opacity","transition","pointerEvents","ScrollbarH","bottom","left","ScrollbarType","CubeLayoutContentProps","children","mods","innerRef","HTMLDivElement","innerProps","LayoutContent","props","ref","_c","t0","externalMods","innerRefProp","otherProps","undefined","outerStyles","innerStyles","internalInnerRef","combinedInnerRef","combinedRef","isTinyScrollbar","t1","Symbol","for","hoverProps","isHovered","handleVStyle","handleHStyle","hasOverflowY","hasOverflowX","isScrolling","t2","scrollbarStyle","t3","hovered","scrolling","finalStyles","T0","t4","eventProps","t5","t6","t7","t8","t9","_LayoutContent","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContent.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  Mods,\n  OUTER_STYLES,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useRef,\n} from 'react';\nimport { useHover } from 'react-aria';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContentElement = tasty({\n  as: 'div',\n  qa: 'LayoutContent',\n  styles: {\n    container: 'content / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'min 0',\n    overflow: 'hidden',\n    boxSizing: 'content-box',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': 'auto',\n        'scrollbar=thin': 'thin',\n        'scrollbar=tiny | scrollbar=none': 'none',\n      },\n\n      '$layout-border-size': '0',\n    },\n\n    // Custom scrollbar handles (when scrollbar=\"tiny\")\n    ScrollbarV: {\n      $: '>',\n      position: 'absolute',\n      right: '1px',\n      top: '$scrollbar-v-top',\n      width: '1ow',\n      height: '$scrollbar-v-height',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n\n    ScrollbarH: {\n      $: '>',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';\n\nexport interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {\n  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */\n  scrollbar?: ScrollbarType;\n  children?: ReactNode;\n  /** Additional modifiers to apply */\n  mods?: Mods;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContent(\n  props: CubeLayoutContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'thin',\n    styles,\n    mods: externalMods,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const combinedRef = useCombinedRefs(ref);\n  const isTinyScrollbar = scrollbar === 'tiny';\n  const { hoverProps, isHovered } = useHover({});\n\n  const {\n    handleVStyle,\n    handleHStyle,\n    hasOverflowY,\n    hasOverflowX,\n    isScrolling,\n  } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n  const scrollbarStyle = isTinyScrollbar\n    ? { ...handleVStyle, ...handleHStyle }\n    : {};\n\n  const mods = {\n    ...externalMods,\n    scrollbar,\n    hovered: isHovered,\n    scrolling: isScrolling,\n  };\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = mergeStyles(\n    styles,\n    outerStyles,\n    innerStyles ? { Inner: innerStyles } : null,\n  );\n\n  return (\n    <ContentElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={mods}\n      styles={finalStyles}\n      style={scrollbarStyle}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n      {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n      {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n    </ContentElement>\n  );\n}\n\nconst _LayoutContent = forwardRef(LayoutContent);\n\n_LayoutContent.displayName = 'Layout.Content';\n\nexport { _LayoutContent as LayoutContent };\n"],"mappings":"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"}
+{"version":3,"file":"LayoutContent.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","Mods","OUTER_STYLES","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useRef","useHover","useCombinedRefs","extractStyles","useTinyScrollbar","LayoutContextReset","ContentElement","as","qa","styles","container","position","display","gridColumns","gridRows","placeContent","placeItems","placeSelf","flexGrow","flexShrink","height","overflow","boxSizing","border","Inner","$","flow","padding","scrollbar","ScrollbarV","right","top","width","radius","fill","opacity","transition","pointerEvents","ScrollbarH","bottom","left","ScrollbarType","CubeLayoutContentProps","children","mods","innerRef","HTMLDivElement","innerProps","LayoutContent","props","ref","_c","t0","externalMods","innerRefProp","otherProps","undefined","outerStyles","innerStyles","internalInnerRef","combinedInnerRef","combinedRef","isTinyScrollbar","t1","Symbol","for","hoverProps","isHovered","handleVTokens","handleHTokens","hasOverflowY","hasOverflowX","isScrolling","t2","scrollbarTokens","t3","hovered","scrolling","finalStyles","T0","t4","eventProps","t5","t6","t7","t8","t9","_LayoutContent","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContent.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  Mods,\n  OUTER_STYLES,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useRef,\n} from 'react';\nimport { useHover } from 'react-aria';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContentElement = tasty({\n  as: 'div',\n  qa: 'LayoutContent',\n  styles: {\n    container: 'content / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'min 0',\n    overflow: 'hidden',\n    boxSizing: 'content-box',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': 'auto',\n        'scrollbar=thin': 'thin',\n        'scrollbar=tiny | scrollbar=none': 'none',\n      },\n\n      '$layout-border-size': '0',\n    },\n\n    // Custom scrollbar handles (when scrollbar=\"tiny\")\n    ScrollbarV: {\n      $: '>',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      right: '$scrollbar-inset',\n      top: '$scrollbar-v-top',\n      width: '1ow',\n      height: '$scrollbar-v-height',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n\n    ScrollbarH: {\n      $: '>',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      bottom: '$scrollbar-inset',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';\n\nexport interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {\n  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */\n  scrollbar?: ScrollbarType;\n  children?: ReactNode;\n  /** Additional modifiers to apply */\n  mods?: Mods;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContent(\n  props: CubeLayoutContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'thin',\n    styles,\n    mods: externalMods,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const combinedRef = useCombinedRefs(ref);\n  const isTinyScrollbar = scrollbar === 'tiny';\n  const { hoverProps, isHovered } = useHover({});\n\n  const {\n    handleVTokens,\n    handleHTokens,\n    hasOverflowY,\n    hasOverflowX,\n    isScrolling,\n  } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n  const scrollbarTokens = isTinyScrollbar\n    ? { ...handleVTokens, ...handleHTokens }\n    : undefined;\n\n  const mods = {\n    ...externalMods,\n    scrollbar,\n    hovered: isHovered,\n    scrolling: isScrolling,\n  };\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = mergeStyles(\n    styles,\n    outerStyles,\n    // oxlint-disable-next-line tasty/no-runtime-styles-mutation -- forwards the consumer's `innerStyles` to `Inner`\n    innerStyles ? { Inner: innerStyles } : null,\n  );\n\n  return (\n    <ContentElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={mods}\n      styles={finalStyles}\n      tokens={scrollbarTokens}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n      {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n      {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n    </ContentElement>\n  );\n}\n\nconst _LayoutContent = forwardRef(LayoutContent);\n\n_LayoutContent.displayName = 'Layout.Content';\n\nexport { _LayoutContent as LayoutContent };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { LayoutNestedContext } from "./LayoutContext.js";
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";
@@ -48,7 +48,7 @@ const HeaderElement = tasty(_LayoutContent, {
 			display: "flex",
 			flow: "row nowrap",
 			placeItems: "center start",
-			gap: "1bw",
+			gap: "$item-gap",
 			preset: "t3 / strong",
 			color: "#dark-02"
 		},

package/dist/components/content/Layout/LayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutHeader.js","names":["IconArrowLeft","tasty","ForwardedRef","forwardRef","Fragment","HTMLAttributes","ReactNode","useMemo","useRef","useI18n","SlashIcon","Button","Link","useAutoTooltip","CubeLayoutContentProps","LayoutContent","HeaderElement","as","qa","styles","container","border","flexShrink","flexGrow","height","Inner","$","display","gridTemplate","gap","placeContent","placeItems","padding","placeSelf","Back","gridArea","margin","Breadcrumbs","flow","preset","color","Title","lineHeight","overflow","textOverflow","whiteSpace","Suffix","Extra","width","Subtitle","CubeLayoutHeaderProps","title","level","suffix","extra","subtitle","breadcrumbs","Array","label","href","onBack","LayoutHeader","props","ref","_c","t","children","mods","otherProps","t0","t1","scrollbar","undefined","titleRef","t2","Symbol","for","targetRef","titleTooltip","t3","t4","tooltip","labelRef","renderWithTooltip","hasBreadcrumbs","length","t5","map","_temp","renderBreadcrumbs","T0","t10","t11","t12","t6","t7","t8","t9","renderTitle","tooltipProps","TitleTag","t13","t14","t15","t16","index","_LayoutHeader","displayName","LayoutContent","_c"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n    height: 'min 6x',\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs extra\" auto\n        \"back title suffix extra\" max-content\n        \".. subtitle subtitle extra\" auto\n        / auto minmax(0, max-content) 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'center stretch',\n      placeItems: 'center stretch',\n      padding: '0 ($content-padding, 1x)',\n      placeSelf: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 / strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      lineHeight: 'normal',\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'center',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection. The heading is what clips\n  // (`overflow: hidden` + ellipsis), so it is both the element measured and\n  // the tooltip's anchor — one stable ref for the two, rather than a ref merged\n  // afresh on every render, which would re-attach the measuring ref (and\n  // rebuild its ResizeObserver) each time the header rendered.\n  const titleRef = useRef<HTMLElement>(null!);\n  const titleTooltip = useMemo(() => ({ targetRef: titleRef }), []);\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: titleTooltip,\n    children: typeof title === 'string' ? title : undefined,\n    labelRef: titleRef,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (tooltipProps?: HTMLAttributes<HTMLElement>) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    // Measured on the heading itself: an inline wrapper around the text\n    // reports a `clientWidth` of 0 and could never read as truncated.\n    return (\n      <TitleTag\n        ref={labelRef}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        {title}\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"clear\"\n            icon={<IconArrowLeft />}\n            aria-label={t('layout.goBack', 'Go back')}\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":"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"}
+{"version":3,"file":"LayoutHeader.js","names":["IconArrowLeft","tasty","ForwardedRef","forwardRef","Fragment","HTMLAttributes","ReactNode","useMemo","useRef","useI18n","SlashIcon","Button","Link","useAutoTooltip","CubeLayoutContentProps","LayoutContent","HeaderElement","as","qa","styles","container","border","flexShrink","flexGrow","height","Inner","$","display","gridTemplate","gap","placeContent","placeItems","padding","placeSelf","Back","gridArea","margin","Breadcrumbs","flow","preset","color","Title","lineHeight","overflow","textOverflow","whiteSpace","Suffix","Extra","width","Subtitle","CubeLayoutHeaderProps","title","level","suffix","extra","subtitle","breadcrumbs","Array","label","href","onBack","LayoutHeader","props","ref","_c","t","children","mods","otherProps","t0","t1","scrollbar","undefined","titleRef","t2","Symbol","for","targetRef","titleTooltip","t3","t4","tooltip","labelRef","renderWithTooltip","hasBreadcrumbs","length","t5","map","_temp","renderBreadcrumbs","T0","t10","t11","t12","t6","t7","t8","t9","renderTitle","tooltipProps","TitleTag","t13","t14","t15","t16","index","_LayoutHeader","displayName","LayoutContent","_c"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n    height: 'min 6x',\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs extra\" auto\n        \"back title suffix extra\" max-content\n        \".. subtitle subtitle extra\" auto\n        / auto minmax(0, max-content) 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'center stretch',\n      placeItems: 'center stretch',\n      padding: '0 ($content-padding, 1x)',\n      placeSelf: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '$item-gap',\n      preset: 't3 / strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      lineHeight: 'normal',\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'center',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection. The heading is what clips\n  // (`overflow: hidden` + ellipsis), so it is both the element measured and\n  // the tooltip's anchor — one stable ref for the two, rather than a ref merged\n  // afresh on every render, which would re-attach the measuring ref (and\n  // rebuild its ResizeObserver) each time the header rendered.\n  const titleRef = useRef<HTMLElement>(null!);\n  const titleTooltip = useMemo(() => ({ targetRef: titleRef }), []);\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: titleTooltip,\n    children: typeof title === 'string' ? title : undefined,\n    labelRef: titleRef,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (tooltipProps?: HTMLAttributes<HTMLElement>) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    // Measured on the heading itself: an inline wrapper around the text\n    // reports a `clientWidth` of 0 and could never read as truncated.\n    return (\n      <TitleTag\n        ref={labelRef}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        {title}\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"clear\"\n            icon={<IconArrowLeft />}\n            aria-label={t('layout.goBack', 'Go back')}\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -114,10 +114,11 @@ const PaneElement = tasty({
 			"$layout-border-size": "0"
 		},
 		ScrollbarV: {
+			"$scrollbar-inset": "1px",
 			position: "absolute",
 			right: {
-				"": "1px",
-				"edge=right": `6px`
+				"": "$scrollbar-inset",
+				"edge=right": `(${HANDLER_RESERVED}px + $scrollbar-inset)`
 			},
 			top: "$scrollbar-v-top",
 			width: "1ow",
@@ -128,15 +129,16 @@ const PaneElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ScrollbarH: {
 			$: ">",
+			"$scrollbar-inset": "1px",
 			position: "absolute",
 			bottom: {
-				"": "1px",
-				"edge=bottom": `6px`
+				"": "$scrollbar-inset",
+				"edge=bottom": `(${HANDLER_RESERVED}px + $scrollbar-inset)`
 			},
 			left: "$scrollbar-h-left",
 			height: "1ow",
@@ -147,7 +149,7 @@ const PaneElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ResizeHandler: {
@@ -187,27 +189,29 @@ const PaneElement = tasty({
 			transition: "theme"
 		},
 		Drag: {
+			"$grip-size": "3px",
+			"$dot-gap": "2px",
 			display: "grid",
-			gap: "2bw",
+			gap: "$dot-gap",
 			border: 0,
 			flow: {
 				"": "row",
 				"edge=right": "column"
 			},
 			gridColumns: {
-				"": "3px 3px 3px 3px 3px",
+				"": "repeat(5, $grip-size)",
 				"edge=right": "auto"
 			},
 			gridRows: {
 				"": "auto",
-				"edge=right": "3px 3px 3px 3px 3px"
+				"edge=right": "repeat(5, $grip-size)"
 			},
 			width: {
 				"": "auto",
-				"edge=right": "3px"
+				"edge=right": "$grip-size"
 			},
 			height: {
-				"": "3px",
+				"": "$grip-size",
 				"edge=right": "auto"
 			},
 			position: "absolute",
@@ -218,9 +222,9 @@ const PaneElement = tasty({
 			radius: "round",
 			outline: {
 				"": "0",
-				"focused | drag": "1bw #primary-text"
+				"focused | drag": "$ring-width #primary-text"
 			},
-			outlineOffset: 1
+			outlineOffset: "$outline-offset"
 		},
 		DragPart: {
 			radius: true,
@@ -345,7 +349,7 @@ function LayoutPane(props, ref) {
 		$[5] = t5;
 	} else t5 = $[5];
 	const { hoverProps, isHovered } = useHover(t5);
-	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const { handleVTokens, handleHTokens, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
 	let t6;
 	if ($[6] !== maxSize || $[7] !== minSize) {
 		t6 = (value) => clampSize(value, minSize, maxSize);
@@ -547,17 +551,17 @@ function LayoutPane(props, ref) {
 	} else t15 = $[42];
 	const handleResetSize = t15;
 	let t16;
-	if ($[43] !== handleHStyle || $[44] !== handleVStyle || $[45] !== isTinyScrollbar) {
+	if ($[43] !== handleHTokens || $[44] !== handleVTokens || $[45] !== isTinyScrollbar) {
 		t16 = isTinyScrollbar ? {
-			...handleVStyle,
-			...handleHStyle
-		} : {};
-		$[43] = handleHStyle;
-		$[44] = handleVStyle;
+			...handleVTokens,
+			...handleHTokens
+		} : void 0;
+		$[43] = handleHTokens;
+		$[44] = handleVTokens;
 		$[45] = isTinyScrollbar;
 		$[46] = t16;
 	} else t16 = $[46];
-	const scrollbarStyle = t16;
+	const scrollbarTokens = t16;
 	const t17 = !isResizable;
 	let t18;
 	if ($[47] !== debouncedHandlerHovered || $[48] !== isDragging || $[49] !== isHandlerFocused || $[50] !== isHovered || $[51] !== isScrolling || $[52] !== mods || $[53] !== resizeEdge || $[54] !== scrollbar || $[55] !== t17) {
@@ -588,18 +592,18 @@ function LayoutPane(props, ref) {
 	const t19 = `${size}px`;
 	const t20 = minSize == null ? "initial" : typeof minSize === "number" ? `${minSize}px` : minSize;
 	let t21;
-	if ($[57] !== scrollbarStyle || $[58] !== t19 || $[59] !== t20) {
+	if ($[57] !== scrollbarTokens || $[58] !== t19 || $[59] !== t20) {
 		t21 = {
-			...scrollbarStyle,
-			"--pane-size": t19,
-			"--pane-min-size": t20
+			...scrollbarTokens,
+			"$pane-size": t19,
+			"$pane-min-size": t20
 		};
-		$[57] = scrollbarStyle;
+		$[57] = scrollbarTokens;
 		$[58] = t19;
 		$[59] = t20;
 		$[60] = t21;
 	} else t21 = $[60];
-	const paneStyle = t21;
+	const paneTokens = t21;
 	const T0 = PaneElement;
 	const t22 = filterBaseProps(otherProps, { eventProps: true });
 	let t23;
@@ -654,14 +658,14 @@ function LayoutPane(props, ref) {
 		$[79] = t27;
 	} else t27 = $[79];
 	let t28;
-	if ($[80] !== T0 || $[81] !== combinedRef || $[82] !== finalStyles || $[83] !== hoverProps || $[84] !== paneMods || $[85] !== paneStyle || $[86] !== t22 || $[87] !== t24 || $[88] !== t25 || $[89] !== t26 || $[90] !== t27) {
+	if ($[80] !== T0 || $[81] !== combinedRef || $[82] !== finalStyles || $[83] !== hoverProps || $[84] !== paneMods || $[85] !== paneTokens || $[86] !== t22 || $[87] !== t24 || $[88] !== t25 || $[89] !== t26 || $[90] !== t27) {
 		t28 = /* @__PURE__ */ jsxs(T0, {
 			ref: combinedRef,
 			...t22,
 			...hoverProps,
 			mods: paneMods,
 			styles: finalStyles,
-			style: paneStyle,
+			tokens: paneTokens,
 			children: [
 				t24,
 				t25,
@@ -674,7 +678,7 @@ function LayoutPane(props, ref) {
 		$[82] = finalStyles;
 		$[83] = hoverProps;
 		$[84] = paneMods;
-		$[85] = paneStyle;
+		$[85] = paneTokens;
 		$[86] = t22;
 		$[87] = t24;
 		$[88] = t25;