@cube-dev/ui-kit 0.173.0 → 0.175.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.d.ts

@@ -9,11 +9,21 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 interface CubeNecessityIndicatorProps {
   /**
    * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`
-   * text. `null` suppresses it — `Label` resolves its own default to that when
-   * `isRequired` was never passed, and forwards the result here.
+   * text. Defaults to `'icon'`, which has no optional form and so only ever
+   * marks a required field. `null` suppresses the indicator entirely.
    */
   necessityIndicator?: NecessityIndicator | null;
+  /**
+   * Marks the label as required. Only an `isRequired` authored on the input,
+   * the label or the `Form` reaches this — a `required` validation rule drives
+   * validation and `aria-required` without decorating the label.
+   */
   isRequired?: boolean;
+  /**
+   * Marks the label as optional. Purely presentational, and ignored when the
+   * field is required.
+   */
+  isOptional?: boolean;
   /**
    * Whether the indicator contributes to the field's accessible name. Off by
    * default because a required field already announces `aria-required`, and
@@ -29,15 +39,17 @@ interface CubeNecessityIndicatorProps {
  * builds a element tree around the label and therefore has to place the marker
  * beside the label text itself rather than after the whole tree.
  *
- * Renders nothing unless a marker was actually asked for.
+ * Both marks are opt-in: nothing renders unless the call site passed
+ * `isRequired` or `isOptional`.
  */
 declare function NecessityIndicatorMark(props: CubeNecessityIndicatorProps): react_jsx_runtime0.JSX.Element | null;
 declare const INLINE_LABEL_STYLES: Styles;
 declare const LABEL_STYLES: Styles;
 interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps {
   labelPosition?: LabelPosition;
-  necessityIndicator?: NecessityIndicator;
+  necessityIndicator?: NecessityIndicator | null;
   isRequired?: boolean;
+  isOptional?: boolean;
   includeNecessityIndicatorInAccessibilityName?: boolean;
   htmlFor?: string;
   for?: string;

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -27,6 +27,25 @@ const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
 	}) }) })
 });
 /**
+* The `(required)` / `(optional)` note. Deliberately quieter than the label it
+* follows: it is an aside about the field, not part of its name.
+*
+* `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`
+* and `message`, so the note joins the established secondary text rather than
+* inventing a size of its own. The weight is dropped back to 400 — `t4` carries
+* 500, the same weight as the label — because that contrast is what makes the
+* note read as an aside at a glance.
+*/
+const NecessityLabelElement = tasty({
+	as: "span",
+	qa: "NecessityLabel",
+	styles: {
+		preset: "t4",
+		color: "#dark-03",
+		fontWeight: 400
+	}
+});
+/**
 * The `*` or `(required)` / `(optional)` marker that follows a field label.
 *
 * Its own component because two places render it and both need the same
@@ -34,25 +53,27 @@ const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
 * builds a element tree around the label and therefore has to place the marker
 * beside the label text itself rather than after the whole tree.
 *
-* Renders nothing unless a marker was actually asked for.
+* Both marks are opt-in: nothing renders unless the call site passed
+* `isRequired` or `isOptional`.
 */
 function NecessityIndicatorMark(props) {
-	const { isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false } = props;
+	const { isRequired, isOptional, necessityIndicator = "icon", includeNecessityIndicatorInAccessibilityName = false } = props;
 	const { t } = useI18n();
 	const requiredLabel = t("form.required", "(required)");
 	const separator = " ​";
-	if (necessityIndicator === "icon") {
-		if (!isRequired) return null;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
+	if (necessityIndicator !== "icon" && necessityIndicator !== "label") return null;
+	if (isRequired) {
+		if (necessityIndicator === "icon") return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
 			"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
 			children: REQUIRED_ICON
 		})] });
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx(NecessityLabelElement, {
+			"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? true : void 0,
+			children: requiredLabel
+		})] });
 	}
-	if (necessityIndicator !== "label") return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
-		"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
-		children: isRequired ? requiredLabel : t("form.optional", "(optional)")
-	})] });
+	if (!isOptional) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx(NecessityLabelElement, { children: t("form.optional", "(optional)") })] });
 }
 const INLINE_LABEL_STYLES = {
 	preset: "t3",
@@ -85,11 +106,12 @@ const LabelElement = tasty({
 function Label(props, ref) {
 	props = useProviderProps(props);
 	const { t } = useI18n();
-	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
+	let { as, qa, children, labelPosition = "top", isRequired, isOptional, necessityIndicator, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
 	let domRef = useObjectRef(ref);
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
 	const mark = /* @__PURE__ */ jsx(NecessityIndicatorMark, {
 		isRequired,
+		isOptional,
 		necessityIndicator,
 		includeNecessityIndicatorInAccessibilityName
 	});

package/dist/components/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. `null` suppresses it — `Label` resolves its own default to that when\n   * `isRequired` was never passed, and forwards the result here.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Renders nothing unless a marker was actually asked for.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    // Same default as `Label`'s own prop: passing `isRequired` at all opts into\n    // the asterisk, and `'label'` has to be asked for. Applied here so the two\n    // call sites cannot disagree about what an omitted prop means.\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  if (necessityIndicator === 'icon') {\n    if (!isRequired) return null;\n\n    return (\n      <>\n        {separator}\n        <span\n          aria-label={\n            includeNecessityIndicatorInAccessibilityName\n              ? requiredLabel\n              : undefined\n          }\n        >\n          {REQUIRED_ICON}\n        </span>\n      </>\n    );\n  }\n\n  if (necessityIndicator !== 'label') return null;\n\n  // Hidden from screen readers when the field is required, because\n  // `aria-required` on the input already announces it. When the field is\n  // optional there is nothing else saying so, so that one is announced.\n  return (\n    <>\n      {separator}\n      <span\n        aria-hidden={\n          !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n        }\n      >\n        {isRequired ? requiredLabel : t('form.optional', '(optional)')}\n      </span>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;;;;;;;;;;;AA6BR,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EACJ,YAIA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,UAC7C;CACJ,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,gBAAgB,EAAE,iBAAiB,aAAa;CAItD,MAAM,YAAY;AAElB,KAAI,uBAAuB,QAAQ;AACjC,MAAI,CAAC,WAAY,QAAO;AAExB,SACE,8CACG,WACD,oBAAC;GACC,cACE,+CACI,gBACA;aAGL;IACI,IACN;;AAIP,KAAI,uBAAuB,QAAS,QAAO;AAK3C,QACE,8CACG,WACD,oBAAC;EACC,eACE,CAAC,+CAA+C,aAAa;YAG9D,aAAa,gBAAgB,EAAE,iBAAiB,aAAa;GACzD,IACN;;AAIP,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,MAAM,OACJ,oBAAC;EACa;EACQ;EAElB;GAEF;AAGJ,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YASA,OAAO,aAAa,WACnB,WAEA,8CACG,UACA,QACA;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\n/**\n * The `(required)` / `(optional)` note. Deliberately quieter than the label it\n * follows: it is an aside about the field, not part of its name.\n *\n * `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`\n * and `message`, so the note joins the established secondary text rather than\n * inventing a size of its own. The weight is dropped back to 400 — `t4` carries\n * 500, the same weight as the label — because that contrast is what makes the\n * note read as an aside at a glance.\n */\nconst NecessityLabelElement = tasty({\n  as: 'span',\n  qa: 'NecessityLabel',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    fontWeight: 400,\n  },\n});\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. Defaults to `'icon'`, which has no optional form and so only ever\n   * marks a required field. `null` suppresses the indicator entirely.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  /**\n   * Marks the label as required. Only an `isRequired` authored on the input,\n   * the label or the `Form` reaches this — a `required` validation rule drives\n   * validation and `aria-required` without decorating the label.\n   */\n  isRequired?: boolean;\n  /**\n   * Marks the label as optional. Purely presentational, and ignored when the\n   * field is required.\n   */\n  isOptional?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Both marks are opt-in: nothing renders unless the call site passed\n * `isRequired` or `isOptional`.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    isOptional,\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  // Anything that is not one of the two shapes means \"no indicator\" — `null`,\n  // and also any stray falsy value a caller might still be passing.\n  if (necessityIndicator !== 'icon' && necessityIndicator !== 'label') {\n    return null;\n  }\n\n  if (isRequired) {\n    if (necessityIndicator === 'icon') {\n      return (\n        <>\n          {separator}\n          <span\n            aria-label={\n              includeNecessityIndicatorInAccessibilityName\n                ? requiredLabel\n                : undefined\n            }\n          >\n            {REQUIRED_ICON}\n          </span>\n        </>\n      );\n    }\n\n    // Hidden from screen readers by default, because `aria-required` on the\n    // input already announces it and repeating it in the name is noise.\n    return (\n      <>\n        {separator}\n        <NecessityLabelElement\n          aria-hidden={\n            !includeNecessityIndicatorInAccessibilityName ? true : undefined\n          }\n        >\n          {requiredLabel}\n        </NecessityLabelElement>\n      </>\n    );\n  }\n\n  // There is no icon form of \"optional\", so the note is rendered whichever\n  // indicator was asked for. Nothing else tells a screen reader the field is\n  // optional, so this one stays in the accessible name.\n  if (!isOptional) return null;\n\n  return (\n    <>\n      {separator}\n      <NecessityLabelElement>\n        {t('form.optional', '(optional)')}\n      </NecessityLabelElement>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  isOptional?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    isOptional,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      isOptional={isOptional}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;;;;;;;;;;;AAaR,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,YAAY;EACb;CACF,CAAC;;;;;;;;;;;;AAuCF,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EACJ,YACA,YACA,qBAAqB,QACrB,+CAA+C,UAC7C;CACJ,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,gBAAgB,EAAE,iBAAiB,aAAa;CAItD,MAAM,YAAY;AAIlB,KAAI,uBAAuB,UAAU,uBAAuB,QAC1D,QAAO;AAGT,KAAI,YAAY;AACd,MAAI,uBAAuB,OACzB,QACE,8CACG,WACD,oBAAC;GACC,cACE,+CACI,gBACA;aAGL;IACI,IACN;AAMP,SACE,8CACG,WACD,oBAAC;GACC,eACE,CAAC,+CAA+C,OAAO;aAGxD;IACqB,IACvB;;AAOP,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,8CACG,WACD,oBAAC,mCACE,EAAE,iBAAiB,aAAa,GACX,IACvB;;AAIP,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAgBF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,YACA,oBACA,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,MAAM,OACJ,oBAAC;EACa;EACA;EACQ;EAElB;GAEF;AAGJ,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YASA,OAAO,aAAa,WACnB,WAEA,8CACG,UACA,QACA;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
 

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.
 */
 function wrapWithField(component, ref, props) {
-	let { forceField, label, extra, labelPosition = "top", labelStyles, isRequired, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, fieldProps, fieldStyles, requiredMark = true, tooltip, isHidden, labelSuffix } = props;
+	let { forceField, label, extra, labelPosition = "top", labelStyles, isRequired, isOptional, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, fieldProps, fieldStyles, requiredMark = true, tooltip, isHidden, labelSuffix } = props;
 	if (!label && !forceField) return component;
 	const mergedFieldProps = fieldStyles ? mergeProps(fieldProps, { styles: fieldStyles }) : fieldProps;
 	const mergedLabelProps = labelStyles ? mergeProps(labelProps, { styles: labelStyles }) : labelProps;
@@ -19,6 +19,7 @@ function wrapWithField(component, ref, props) {
 		extra,
 		labelPosition,
 		isRequired,
+		isOptional,
 		isDisabled,
 		necessityIndicator,
 		labelProps: mergedLabelProps,

package/dist/components/form/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,cACd,WACA,KACA,OACA;CACA,IAAI,EACF,YACA,OACA,OACA,gBAAgB,OAChB,aACA,YACA,YACA,oBACA,SACA,eACA,aACA,cACA,WACA,SACA,YACA,YACA,aACA,eAAe,MACf,SACA,UACA,gBACE;AAEJ,KAAI,CAAC,SAAS,CAAC,WACb,QAAO;CAIT,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,EAAE,IAAI,KAAK,GAAG,wBAAyB,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEG;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX;GAEF"}
+{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,cACd,WACA,KACA,OACA;CACA,IAAI,EACF,YACA,OACA,OACA,gBAAgB,OAChB,aACA,YACA,YACA,YACA,oBACA,SACA,eACA,aACA,cACA,WACA,SACA,YACA,YACA,aACA,eAAe,MACf,SACA,UACA,gBACE;AAEJ,KAAI,CAAC,SAAS,CAAC,WACb,QAAO;CAIT,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,EAAE,IAAI,KAAK,GAAG,wBAAyB,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX;GAEF"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.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/Board/Board.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.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";
@@ -125,13 +125,14 @@ function compactTypeToCore(compact) {
 	return compact;
 }
 function BoardInner(props, ref) {
-	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rows: fixedRows, rowHeight = DEFAULT_ROW_HEIGHT, margin = [8, 8], containerPadding, maxRows: maxRowsProp, extraRows = 0, compact = "vertical", allowOverlap = false, preventCollision = false, collisionMode = "revert", isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], resizeGripPlacement = "inside", dragCancel = BOARD_SELECTION_CANCEL, dragHandle, showGridLines, isAligned = false, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, selectionCancel = BOARD_SELECTION_CANCEL, allowMarqueeSelection = selectionMode === "multiple", onWidgetsDelete, constraints, width: providedWidth, widgetProps, children, ...otherProps } = props;
+	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rows: fixedRows, rowHeight = DEFAULT_ROW_HEIGHT, margin = [8, 8], containerPadding, maxRows: maxRowsProp, extraRows = 0, compact = "vertical", allowOverlap = false, preventCollision = false, collisionMode = "revert", isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], resizeGripPlacement, dragCancel = BOARD_SELECTION_CANCEL, dragHandle, showGridLines, isAligned = false, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, selectionCancel = BOARD_SELECTION_CANCEL, allowMarqueeSelection = selectionMode === "multiple", onWidgetsDelete, constraints, width: providedWidth, widgetProps, children, ...otherProps } = props;
 	const maxRows = maxRowsProp ?? (fixedRows != null ? Math.max(1, fixedRows) : Infinity);
 	const registry = useBoardRegistry();
 	const parentMetrics = useBoardMetrics();
 	const host = useBoardHost();
 	const inheritedGridLines = useBoardGridLines();
 	const aligned = isAligned && !!parentMetrics;
+	const boardDepth = (parentMetrics?.depth ?? -1) + 1;
 	const widgetPropsStyles = useMemo(() => {
 		if (!widgetProps) return void 0;
 		const extracted = extractStyles(widgetProps, CONTAINER_STYLES);
@@ -285,6 +286,8 @@ function BoardInner(props, ref) {
 		recompactForCols
 	]);
 	const naturalHeight = renderedRows > 0 ? renderedRows * effectiveRowHeight + Math.max(0, renderedRows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : effectiveRowHeight;
+	const registerNestedBoard = host?.registerNestedBoard;
+	useEffect(() => registerNestedBoard?.(), [registerNestedBoard]);
 	const requestHeightDeficit = host?.requestHeightDeficit;
 	useEffect(() => {
 		if (!aligned || !host?.isAutoHeight || !requestHeightDeficit) return;
@@ -620,8 +623,9 @@ function BoardInner(props, ref) {
 		colWidth: calcGridColWidth(positionParams),
 		rowHeight: positionParams.rowHeight,
 		margin: positionParams.margin,
-		containerPadding: positionParams.containerPadding
-	}), [positionParams]);
+		containerPadding: positionParams.containerPadding,
+		depth: boardDepth
+	}), [positionParams, boardDepth]);
 	return /* @__PURE__ */ jsx(BoardMetricsContext.Provider, {
 		value: boardMetrics,
 		children: /* @__PURE__ */ jsx(BoardGridLinesContext.Provider, {
@@ -681,6 +685,7 @@ function BoardInner(props, ref) {
 									isResizable: widgetResizable,
 									resizeHandles: handles,
 									resizeGripPlacement: gripPlacement,
+									boardDepth,
 									isAutoHeight: widgetIsAutoHeight,
 									qa: widgetQa,
 									dragCancel: widgetDragCancel,