@cube-dev/ui-kit 0.202.0 → 0.203.0

package/dist/components/form/Form/use-field/use-field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { isModernFormController } from "../backend.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";

package/dist/components/form/Form/use-form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController, modernBackendUnavailableError } from "./backend.js";
 import { applyRules } from "./validation.js";
 import { dotizeConvert } from "../../../utils/dotize.js";

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 //#region src/components/form/Form/validation.ts

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";

package/dist/components/form/field-chrome.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { warn } from "../../utils/warnings.js";
 //#region src/components/form/field-chrome.ts
 /** Empty slot values suppress content; numeric zero is still text. */

package/dist/components/form/field-layout.d.ts

@@ -3,8 +3,18 @@ import { DimensionStyleProps, PositionStyleProps, Styles } from "@tenphi/tasty";
 //#region src/components/form/field-layout.d.ts
 /**
  * An input's style props. They place and size its outer element: the field
- * wrapper when it renders, the input itself otherwise.
+ * wrapper when it renders, the input itself otherwise. `controlWidth` always
+ * sizes the input.
  */
-export interface FieldLayoutStyleProps extends PositionStyleProps, DimensionStyleProps {}
+export interface FieldLayoutStyleProps extends PositionStyleProps, DimensionStyleProps {
+  /**
+   * The control's own width: the element `width` sizes when the input renders
+   * bare, in every label position. Beside a side label, `width` takes the label
+   * column too, so this is the one that sizes the control alone. It wins over
+   * `width` on a bare input and over `styles.width`. A state map resolves
+   * against the control, and `false` leaves the width as it is.
+   */
+  controlWidth?: Styles['width'];
+}
 //#endregion
 //# sourceMappingURL=field-layout.d.ts.map

package/dist/components/form/field-layout.js

@@ -1,10 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../utils/styles.js";
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { rendersFieldChrome } from "./wrapper.js";
 import { DIMENSION_STYLES, POSITION_STYLES } from "@tenphi/tasty";
 //#region src/components/form/field-layout.ts
-/** The names of `FieldLayoutStyleProps`. */
+/** The names of the style props in `FieldLayoutStyleProps`: all but `controlWidth`. */
 const FIELD_LAYOUT_STYLES = [...POSITION_STYLES, ...DIMENSION_STYLES];
 /**
 * Style props that size the wrapper across, so the input fills its width.
@@ -46,22 +46,40 @@ function isSizing(value) {
 */
 const PHYSICAL_SIZES = [["inlineSize", "width"], ["blockSize", "height"]];
 /**
+* The control's styles with `controlWidth` over their width. A logical size
+* counts as `width` here too, so it goes. `false`, from a `cond && size`, is
+* no width at all.
+*/
+function withControlWidth(styles, controlWidth) {
+	if (controlWidth === void 0 || controlWidth === false) return styles;
+	const sized = {
+		...styles,
+		width: controlWidth
+	};
+	delete sized.inlineSize;
+	return sized;
+}
+/**
 * Routes an input's style props to its outer element. Bare, they join the
 * input's `styles`. With the field chrome, they go to the wrapper over
 * `fieldStyles`, and a wrapper they size gets `fill-width` / `fill-height`,
 * under which `FieldWrapper` lets the input stretch as it would in a grid cell
-* of that size. `styles` always stays on the input.
+* of that size. `styles` always stays on the input, and `controlWidth` sizes
+* it over `styles`, wherever the style props go.
 */
 function splitFieldLayout(props, options = {}) {
-	const { hasChrome = rendersFieldChrome(props), fillHeightOnFlex = false, defaultStyles } = options;
+	const { hasChrome = rendersFieldChrome(props), fillHeightOnFlex = false, defaultStyles, overStyles } = options;
 	const record = props;
-	if (!hasChrome) return {
-		styles: extractStyles(props, FIELD_LAYOUT_STYLES, defaultStyles),
-		field: {},
-		fillWidth: false,
-		fillHeight: false
-	};
-	const styles = mergeStyleLayers(defaultStyles, record.styles);
+	if (!hasChrome) {
+		const styles = extractStyles(props, FIELD_LAYOUT_STYLES, defaultStyles);
+		return {
+			styles: withControlWidth(overStyles ? mergeStyleLayers(styles, overStyles) : styles, record.controlWidth),
+			field: {},
+			fillWidth: false,
+			fillHeight: false
+		};
+	}
+	const styles = withControlWidth(mergeStyleLayers(defaultStyles, record.styles, overStyles), record.controlWidth);
 	const layoutStyles = extractStyles(props, FIELD_LAYOUT_STYLES, void 0, void 0, ["styles"]);
 	if (!Object.keys(layoutStyles).length) return {
 		styles,

package/dist/components/form/field-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-layout.js","names":["DIMENSION_STYLES","POSITION_STYLES","mergeProps","extractStyles","mergeStyleLayers","rendersFieldChrome","DimensionStyleProps","PositionStyleProps","Styles","Props","FieldLayoutStyleProps","FIELD_LAYOUT_STYLES","FILL_WIDTH_STYLES","FILL_HEIGHT_STYLES","FLEX_STYLES","NOT_SIZING","Set","isSizing","value","has","PHYSICAL_SIZES","const","FieldLayoutOptions","hasChrome","fillHeightOnFlex","defaultStyles","FieldLayout","styles","field","fieldStyles","fieldProps","fillWidth","fillHeight","splitFieldLayout","props","options","record","Record","layoutStyles","undefined","Object","keys","length","logical","physical","sizes","names","some","name","mods"],"sources":["../../../src/components/form/field-layout.ts"],"sourcesContent":["import { DIMENSION_STYLES, POSITION_STYLES } from '@tenphi/tasty';\n\nimport { mergeProps } from '../../utils/react/index';\nimport { extractStyles, mergeStyleLayers } from '../../utils/styles';\n\nimport { rendersFieldChrome } from './wrapper';\n\nimport type {\n  DimensionStyleProps,\n  PositionStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport type { Props } from '../../props';\n\n/**\n * An input's style props. They place and size its outer element: the field\n * wrapper when it renders, the input itself otherwise.\n */\nexport interface FieldLayoutStyleProps\n  extends PositionStyleProps, DimensionStyleProps {}\n\n/** The names of `FieldLayoutStyleProps`. */\nexport const FIELD_LAYOUT_STYLES: readonly string[] = [\n  ...POSITION_STYLES,\n  ...DIMENSION_STYLES,\n];\n\n/**\n * Style props that size the wrapper across, so the input fills its width.\n * `inlineSize` counts as `width`, below.\n */\nconst FILL_WIDTH_STYLES = ['width', 'flexBasis', 'flexGrow', 'flex'];\n/**\n * Style props that size the wrapper down, so the input fills its height.\n * `blockSize` counts as `height`, below.\n */\nconst FILL_HEIGHT_STYLES = ['height'];\nconst FLEX_STYLES = ['flexBasis', 'flexGrow', 'flex'];\n\n/** Values that leave an element at its natural size, `false` from a `cond && size` included. */\nconst NOT_SIZING = new Set<unknown>([false, 0, '0', 'none', 'auto', 'initial']);\n\n/** A value that sizes its element: set, and not a reset or a no-op. */\nfunction isSizing(value: unknown) {\n  return value != null && !NOT_SIZING.has(value);\n}\n\n/**\n * The wrapper's own `width` follows a logical size in the same CSS rule and\n * overrides it, so on the wrapper a logical size takes its physical name. A\n * physical one given as well, `null` included, wins.\n */\nconst PHYSICAL_SIZES = [\n  ['inlineSize', 'width'],\n  ['blockSize', 'height'],\n] as const;\n\nexport interface FieldLayoutOptions {\n  /**\n   * Whether the input renders its field wrapper. Defaults to\n   * `rendersFieldChrome(props)`, so pass the props `wrapWithField` receives. A\n   * grouped option, which never wraps, passes `false`.\n   */\n  hasChrome?: boolean;\n  /**\n   * Whether flex props also fill the wrapper's height: set by the inputs whose\n   * bare form grows with its flex line (lists, text areas). A single-line input\n   * would only collect the spare height between itself and its message.\n   */\n  fillHeightOnFlex?: boolean;\n  /** The input's own default styles, under `styles`. */\n  defaultStyles?: Styles;\n}\n\nexport interface FieldLayout {\n  /** The input's styles: `styles`, plus the style props when it is bare. */\n  styles: Styles;\n  /**\n   * Spread into the props of `wrapWithField`: the wrapper's `fieldStyles`,\n   * with the style props over them, and its `fieldProps`, with the fill mods.\n   */\n  field: { fieldStyles?: Styles; fieldProps?: Props };\n  /** Whether the style props size the wrapper across: the input fills it. */\n  fillWidth: boolean;\n  /** Whether the style props size the wrapper down: the input fills it. */\n  fillHeight: boolean;\n}\n\n/**\n * Routes an input's style props to its outer element. Bare, they join the\n * input's `styles`. With the field chrome, they go to the wrapper over\n * `fieldStyles`, and a wrapper they size gets `fill-width` / `fill-height`,\n * under which `FieldWrapper` lets the input stretch as it would in a grid cell\n * of that size. `styles` always stays on the input.\n */\nexport function splitFieldLayout(\n  props: object,\n  options: FieldLayoutOptions = {},\n): FieldLayout {\n  const {\n    hasChrome = rendersFieldChrome(props),\n    fillHeightOnFlex = false,\n    defaultStyles,\n  } = options;\n  const record = props as Record<string, unknown> & {\n    styles?: Styles;\n    fieldStyles?: Styles;\n    fieldProps?: Props;\n  };\n\n  if (!hasChrome) {\n    return {\n      styles: extractStyles(props, FIELD_LAYOUT_STYLES, defaultStyles),\n      field: {},\n      fillWidth: false,\n      fillHeight: false,\n    };\n  }\n\n  const styles = mergeStyleLayers(defaultStyles, record.styles);\n  const layoutStyles = extractStyles(\n    props,\n    FIELD_LAYOUT_STYLES,\n    undefined,\n    undefined,\n    ['styles'],\n  );\n\n  if (!Object.keys(layoutStyles).length) {\n    return { styles, field: {}, fillWidth: false, fillHeight: false };\n  }\n\n  for (const [logical, physical] of PHYSICAL_SIZES) {\n    if (!(logical in layoutStyles)) continue;\n\n    if (layoutStyles[physical] === undefined) {\n      layoutStyles[physical] = layoutStyles[logical];\n    }\n\n    delete layoutStyles[logical];\n  }\n\n  const sizes = (names: string[]) =>\n    names.some((name) => isSizing(layoutStyles[name]));\n  const fillWidth = sizes(FILL_WIDTH_STYLES);\n  const fillHeight =\n    sizes(FILL_HEIGHT_STYLES) || (fillHeightOnFlex && sizes(FLEX_STYLES));\n\n  return {\n    styles,\n    field: {\n      fieldStyles: mergeStyleLayers(record.fieldStyles, layoutStyles),\n      fieldProps:\n        fillWidth || fillHeight\n          ? mergeProps(record.fieldProps, {\n              mods: { 'fill-width': fillWidth, 'fill-height': fillHeight },\n            })\n          : record.fieldProps,\n    },\n    fillWidth,\n    fillHeight,\n  };\n}\n"],"mappings":";;;;;;;AAsBA,MAAaW,sBAAyC,CACpD,GAAGV,iBACH,GAAGD,gBAAgB;;;;;AAOrB,MAAMY,oBAAoB;CAAC;CAAS;CAAa;CAAY;AAAM;;;;;AAKnE,MAAMC,qBAAqB,CAAC,QAAQ;AACpC,MAAMC,cAAc;CAAC;CAAa;CAAY;AAAM;;AAGpD,MAAMC,6BAAa,IAAIC,IAAa;CAAC;CAAO;CAAG;CAAK;CAAQ;CAAQ;AAAS,CAAC;;AAG9E,SAASC,SAASC,OAAgB;CAChC,OAAOA,SAAS,QAAQ,CAACH,WAAWI,IAAID,KAAK;AAC/C;;;;;;AAOA,MAAME,iBAAiB,CACrB,CAAC,cAAc,OAAO,GACtB,CAAC,aAAa,QAAQ,CAAC;;;;;;;;AAyCzB,SAAgBa,iBACdC,OACAC,UAA8B,CAAC,GAClB;CACb,MAAM,EACJZ,YAAYlB,mBAAmB6B,KAAK,GACpCV,mBAAmB,OACnBC,kBACEU;CACJ,MAAMC,SAASF;CAMf,IAAI,CAACX,WACH,OAAO;EACLI,QAAQxB,cAAc+B,OAAOvB,qBAAqBc,aAAa;EAC/DG,OAAO,CAAC;EACRG,WAAW;EACXC,YAAY;CACd;CAGF,MAAML,SAASvB,iBAAiBqB,eAAeW,OAAOT,MAAM;CAC5D,MAAMW,eAAenC,cACnB+B,OACAvB,qBACA4B,KAAAA,GACAA,KAAAA,GACA,CAAC,QAAQ,CACX;CAEA,IAAI,CAACC,OAAOC,KAAKH,YAAY,CAAC,CAACI,QAC7B,OAAO;EAAEf;EAAQC,OAAO,CAAC;EAAGG,WAAW;EAAOC,YAAY;CAAM;CAGlE,KAAK,MAAM,CAACW,SAASC,aAAaxB,gBAAgB;EAChD,IAAI,EAAEuB,WAAWL,eAAe;EAEhC,IAAIA,aAAaM,cAAcL,KAAAA,GAC7BD,aAAaM,YAAYN,aAAaK;EAGxC,OAAOL,aAAaK;CACtB;CAEA,MAAME,SAASC,UACbA,MAAMC,MAAMC,SAAS/B,SAASqB,aAAaU,KAAK,CAAC;CACnD,MAAMjB,YAAYc,MAAMjC,iBAAiB;CACzC,MAAMoB,aACJa,MAAMhC,kBAAkB,KAAMW,oBAAoBqB,MAAM/B,WAAW;CAErE,OAAO;EACLa;EACAC,OAAO;GACLC,aAAazB,iBAAiBgC,OAAOP,aAAaS,YAAY;GAC9DR,YACEC,aAAaC,aACT9B,WAAWkC,OAAON,YAAY,EAC5BmB,MAAM;IAAE,cAAclB;IAAW,eAAeC;GAAW,EAC7D,CAAC,IACDI,OAAON;EACf;EACAC;EACAC;CACF;AACF"}
+{"version":3,"file":"field-layout.js","names":["DIMENSION_STYLES","POSITION_STYLES","mergeProps","extractStyles","mergeStyleLayers","rendersFieldChrome","DimensionStyleProps","PositionStyleProps","Styles","Props","FieldLayoutStyleProps","controlWidth","FIELD_LAYOUT_STYLES","FILL_WIDTH_STYLES","FILL_HEIGHT_STYLES","FLEX_STYLES","NOT_SIZING","Set","isSizing","value","has","PHYSICAL_SIZES","const","FieldLayoutOptions","hasChrome","fillHeightOnFlex","defaultStyles","overStyles","FieldLayout","styles","field","fieldStyles","fieldProps","fillWidth","fillHeight","withControlWidth","undefined","sized","width","Record","inlineSize","splitFieldLayout","props","options","record","layoutStyles","Object","keys","length","logical","physical","sizes","names","some","name","mods"],"sources":["../../../src/components/form/field-layout.ts"],"sourcesContent":["import { DIMENSION_STYLES, POSITION_STYLES } from '@tenphi/tasty';\n\nimport { mergeProps } from '../../utils/react/index';\nimport { extractStyles, mergeStyleLayers } from '../../utils/styles';\n\nimport { rendersFieldChrome } from './wrapper';\n\nimport type {\n  DimensionStyleProps,\n  PositionStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport type { Props } from '../../props';\n\n/**\n * An input's style props. They place and size its outer element: the field\n * wrapper when it renders, the input itself otherwise. `controlWidth` always\n * sizes the input.\n */\nexport interface FieldLayoutStyleProps\n  extends PositionStyleProps, DimensionStyleProps {\n  /**\n   * The control's own width: the element `width` sizes when the input renders\n   * bare, in every label position. Beside a side label, `width` takes the label\n   * column too, so this is the one that sizes the control alone. It wins over\n   * `width` on a bare input and over `styles.width`. A state map resolves\n   * against the control, and `false` leaves the width as it is.\n   */\n  controlWidth?: Styles['width'];\n}\n\n/** The names of the style props in `FieldLayoutStyleProps`: all but `controlWidth`. */\nexport const FIELD_LAYOUT_STYLES: readonly string[] = [\n  ...POSITION_STYLES,\n  ...DIMENSION_STYLES,\n];\n\n/**\n * Style props that size the wrapper across, so the input fills its width.\n * `inlineSize` counts as `width`, below.\n */\nconst FILL_WIDTH_STYLES = ['width', 'flexBasis', 'flexGrow', 'flex'];\n/**\n * Style props that size the wrapper down, so the input fills its height.\n * `blockSize` counts as `height`, below.\n */\nconst FILL_HEIGHT_STYLES = ['height'];\nconst FLEX_STYLES = ['flexBasis', 'flexGrow', 'flex'];\n\n/** Values that leave an element at its natural size, `false` from a `cond && size` included. */\nconst NOT_SIZING = new Set<unknown>([false, 0, '0', 'none', 'auto', 'initial']);\n\n/** A value that sizes its element: set, and not a reset or a no-op. */\nfunction isSizing(value: unknown) {\n  return value != null && !NOT_SIZING.has(value);\n}\n\n/**\n * The wrapper's own `width` follows a logical size in the same CSS rule and\n * overrides it, so on the wrapper a logical size takes its physical name. A\n * physical one given as well, `null` included, wins.\n */\nconst PHYSICAL_SIZES = [\n  ['inlineSize', 'width'],\n  ['blockSize', 'height'],\n] as const;\n\nexport interface FieldLayoutOptions {\n  /**\n   * Whether the input renders its field wrapper. Defaults to\n   * `rendersFieldChrome(props)`, so pass the props `wrapWithField` receives. A\n   * grouped option, which never wraps, passes `false`.\n   */\n  hasChrome?: boolean;\n  /**\n   * Whether flex props also fill the wrapper's height: set by the inputs whose\n   * bare form grows with its flex line (lists, text areas). A single-line input\n   * would only collect the spare height between itself and its message.\n   */\n  fillHeightOnFlex?: boolean;\n  /** The input's own default styles, under `styles`. */\n  defaultStyles?: Styles;\n  /**\n   * Styles a caller sets on the same element over `styles`, such as\n   * `wrapperStyles` on the date pickers. `controlWidth` still wins.\n   */\n  overStyles?: Styles;\n}\n\nexport interface FieldLayout {\n  /**\n   * The input's styles: `styles`, plus the style props when it is bare, then\n   * `overStyles`, and `controlWidth` over all of them.\n   */\n  styles: Styles;\n  /**\n   * Spread into the props of `wrapWithField`: the wrapper's `fieldStyles`,\n   * with the style props over them, and its `fieldProps`, with the fill mods.\n   */\n  field: { fieldStyles?: Styles; fieldProps?: Props };\n  /** Whether the style props size the wrapper across: the input fills it. */\n  fillWidth: boolean;\n  /** Whether the style props size the wrapper down: the input fills it. */\n  fillHeight: boolean;\n}\n\n/**\n * The control's styles with `controlWidth` over their width. A logical size\n * counts as `width` here too, so it goes. `false`, from a `cond && size`, is\n * no width at all.\n */\nfunction withControlWidth(styles: Styles, controlWidth: unknown): Styles {\n  if (controlWidth === undefined || controlWidth === false) return styles;\n\n  const sized = { ...styles, width: controlWidth } as Record<string, unknown>;\n\n  delete sized.inlineSize;\n\n  return sized as Styles;\n}\n\n/**\n * Routes an input's style props to its outer element. Bare, they join the\n * input's `styles`. With the field chrome, they go to the wrapper over\n * `fieldStyles`, and a wrapper they size gets `fill-width` / `fill-height`,\n * under which `FieldWrapper` lets the input stretch as it would in a grid cell\n * of that size. `styles` always stays on the input, and `controlWidth` sizes\n * it over `styles`, wherever the style props go.\n */\nexport function splitFieldLayout(\n  props: object,\n  options: FieldLayoutOptions = {},\n): FieldLayout {\n  const {\n    hasChrome = rendersFieldChrome(props),\n    fillHeightOnFlex = false,\n    defaultStyles,\n    overStyles,\n  } = options;\n  const record = props as Record<string, unknown> & {\n    styles?: Styles;\n    fieldStyles?: Styles;\n    fieldProps?: Props;\n    controlWidth?: Styles['width'];\n  };\n\n  if (!hasChrome) {\n    const styles = extractStyles(props, FIELD_LAYOUT_STYLES, defaultStyles);\n\n    return {\n      styles: withControlWidth(\n        overStyles ? mergeStyleLayers(styles, overStyles) : styles,\n        record.controlWidth,\n      ),\n      field: {},\n      fillWidth: false,\n      fillHeight: false,\n    };\n  }\n\n  const styles = withControlWidth(\n    mergeStyleLayers(defaultStyles, record.styles, overStyles),\n    record.controlWidth,\n  );\n  const layoutStyles = extractStyles(\n    props,\n    FIELD_LAYOUT_STYLES,\n    undefined,\n    undefined,\n    ['styles'],\n  );\n\n  if (!Object.keys(layoutStyles).length) {\n    return { styles, field: {}, fillWidth: false, fillHeight: false };\n  }\n\n  for (const [logical, physical] of PHYSICAL_SIZES) {\n    if (!(logical in layoutStyles)) continue;\n\n    if (layoutStyles[physical] === undefined) {\n      layoutStyles[physical] = layoutStyles[logical];\n    }\n\n    delete layoutStyles[logical];\n  }\n\n  const sizes = (names: string[]) =>\n    names.some((name) => isSizing(layoutStyles[name]));\n  const fillWidth = sizes(FILL_WIDTH_STYLES);\n  const fillHeight =\n    sizes(FILL_HEIGHT_STYLES) || (fillHeightOnFlex && sizes(FLEX_STYLES));\n\n  return {\n    styles,\n    field: {\n      fieldStyles: mergeStyleLayers(record.fieldStyles, layoutStyles),\n      fieldProps:\n        fillWidth || fillHeight\n          ? mergeProps(record.fieldProps, {\n              mods: { 'fill-width': fillWidth, 'fill-height': fillHeight },\n            })\n          : record.fieldProps,\n    },\n    fillWidth,\n    fillHeight,\n  };\n}\n"],"mappings":";;;;;;;AAgCA,MAAaY,sBAAyC,CACpD,GAAGX,iBACH,GAAGD,gBAAgB;;;;;AAOrB,MAAMa,oBAAoB;CAAC;CAAS;CAAa;CAAY;AAAM;;;;;AAKnE,MAAMC,qBAAqB,CAAC,QAAQ;AACpC,MAAMC,cAAc;CAAC;CAAa;CAAY;AAAM;;AAGpD,MAAMC,6BAAa,IAAIC,IAAa;CAAC;CAAO;CAAG;CAAK;CAAQ;CAAQ;AAAS,CAAC;;AAG9E,SAASC,SAASC,OAAgB;CAChC,OAAOA,SAAS,QAAQ,CAACH,WAAWI,IAAID,KAAK;AAC/C;;;;;;AAOA,MAAME,iBAAiB,CACrB,CAAC,cAAc,OAAO,GACtB,CAAC,aAAa,QAAQ,CAAC;;;;;;AA+CzB,SAASc,iBAAiBN,QAAgBlB,cAA+B;CACvE,IAAIA,iBAAiByB,KAAAA,KAAazB,iBAAiB,OAAO,OAAOkB;CAEjE,MAAMQ,QAAQ;EAAE,GAAGR;EAAQS,OAAO3B;CAAa;CAE/C,OAAO0B,MAAMG;CAEb,OAAOH;AACT;;;;;;;;;AAUA,SAAgBI,iBACdC,OACAC,UAA8B,CAAC,GAClB;CACb,MAAM,EACJnB,YAAYnB,mBAAmBqC,KAAK,GACpCjB,mBAAmB,OACnBC,eACAC,eACEgB;CACJ,MAAMC,SAASF;CAOf,IAAI,CAAClB,WAAW;EACd,MAAMK,SAAS1B,cAAcuC,OAAO9B,qBAAqBc,aAAa;EAEtE,OAAO;GACLG,QAAQM,iBACNR,aAAavB,iBAAiByB,QAAQF,UAAU,IAAIE,QACpDe,OAAOjC,YACT;GACAmB,OAAO,CAAC;GACRG,WAAW;GACXC,YAAY;EACd;CACF;CAEA,MAAML,SAASM,iBACb/B,iBAAiBsB,eAAekB,OAAOf,QAAQF,UAAU,GACzDiB,OAAOjC,YACT;CACA,MAAMkC,eAAe1C,cACnBuC,OACA9B,qBACAwB,KAAAA,GACAA,KAAAA,GACA,CAAC,QAAQ,CACX;CAEA,IAAI,CAACU,OAAOC,KAAKF,YAAY,CAAC,CAACG,QAC7B,OAAO;EAAEnB;EAAQC,OAAO,CAAC;EAAGG,WAAW;EAAOC,YAAY;CAAM;CAGlE,KAAK,MAAM,CAACe,SAASC,aAAa7B,gBAAgB;EAChD,IAAI,EAAE4B,WAAWJ,eAAe;EAEhC,IAAIA,aAAaK,cAAcd,KAAAA,GAC7BS,aAAaK,YAAYL,aAAaI;EAGxC,OAAOJ,aAAaI;CACtB;CAEA,MAAME,SAASC,UACbA,MAAMC,MAAMC,SAASpC,SAAS2B,aAAaS,KAAK,CAAC;CACnD,MAAMrB,YAAYkB,MAAMtC,iBAAiB;CACzC,MAAMqB,aACJiB,MAAMrC,kBAAkB,KAAMW,oBAAoB0B,MAAMpC,WAAW;CAErE,OAAO;EACLc;EACAC,OAAO;GACLC,aAAa3B,iBAAiBwC,OAAOb,aAAac,YAAY;GAC9Db,YACEC,aAAaC,aACThC,WAAW0C,OAAOZ,YAAY,EAC5BuB,MAAM;IAAE,cAActB;IAAW,eAAeC;GAAW,EAC7D,CAAC,IACDU,OAAOZ;EACf;EACAC;EACAC;CACF;AACF"}

package/dist/components/form/legacy-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { warn } from "../../utils/warnings.js";
 //#region src/components/form/legacy-tooltip.ts
 let hasWarnedAboutLegacyTooltip = false;

package/dist/components/form/validation/ValidationIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { hasValidationState } from "./resolve-validation-props.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/form/validation/resolve-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/use-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
 import { c } from "react/compiler-runtime";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeStyleLayers } from "../../utils/styles.js";
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { hasFieldContent, warnAboutForceField } from "./field-chrome.js";

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

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

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

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

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/ResizablePanel.js

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

package/dist/components/layout/Space.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Suffix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { c } from "react/compiler-runtime";

package/dist/components/navigation/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/navigation/Pagination/use-pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useControlledState } from "@react-stately/utils";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useTabsContext } from "./TabsContext.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useMemo, useRef } from "react";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -74,7 +74,7 @@ function TabList(_props) {
 }
 TabList.displayName = "CubeTabList";
 function TabsRoot(props, ref) {
-	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", placement = "top", onChange, onDelete, onTitleChange, autoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = "Tabs", renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = "suffix", scrollArrowsPosition = "suffix", hideTabListScroll = false, tabListPadding, barStyles, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
+	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", placement = "top", onChange, onDelete, onTitleChange, autoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = "Tabs", renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = "suffix", scrollArrowsPosition = "suffix", hideTabListScroll = false, tabListPadding, barStyles, tabListStyles, prefixStyles, suffixStyles, tokens, ...otherProps } = props;
 	const orientation = placement === "left" || placement === "right" ? "vertical" : "horizontal";
 	const effectiveType = orientation === "vertical" && type === "narrow" ? "default" : type;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
@@ -361,6 +361,7 @@ function TabsRoot(props, ref) {
 	}) : null;
 	const prefixHasActions = shouldShowTabPicker && tabPickerPosition === "prefix" || shouldShowScrollArrows && scrollArrowsPosition === "prefix";
 	const suffixHasActions = shouldShowTabPicker && tabPickerPosition === "suffix" || shouldShowScrollArrows && scrollArrowsPosition === "suffix";
+	const handleTokens = showTinyScrollbar ? orientation === "vertical" ? handleVTokens : handleHTokens : void 0;
 	return /* @__PURE__ */ jsx(TabsProvider, {
 		value: baseContextValue,
 		children: /* @__PURE__ */ jsxs(TabsElement, {
@@ -368,7 +369,10 @@ function TabsRoot(props, ref) {
 			qa,
 			mods,
 			styles: combinedStyles,
-			tokens: showTinyScrollbar ? orientation === "vertical" ? handleVTokens : handleHTokens : void 0,
+			tokens: {
+				...tokens,
+				...handleTokens
+			},
 			"data-size": size,
 			children: [
 				/* @__PURE__ */ jsxs("div", {