@dynatrace/strato-components 3.11.3 → 3.12.1

package/esm/forms/checkbox/Checkbox.css

@@ -1,67 +1,67 @@
-._qmw7sp0-3-11-3 {
+._qmw7sp0-3-12-1 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-11-3 {
+._qmw7sp1-3-12-1 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-11-3:after {
+._qmw7sp2-3-12-1:after {
   content: "*";
 }
-._qmw7sp3-3-11-3 {
+._qmw7sp3-3-12-1 {
   cursor: default;
 }
-._qmw7sp4-3-11-3 {
+._qmw7sp4-3-12-1 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-11-3);
+  background-color: var(--_bx32h3-3-12-1);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-11-3 {
+._qmw7sp5-3-12-1 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-11-3 {
+._qmw7sp6-3-12-1 {
   margin-right: 0;
 }
-._qmw7spg-3-11-3 {
+._qmw7spg-3-12-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._qmw7spg-3-11-3:not(:has(:focus-visible)) {
+._qmw7spg-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._qmw7sph-3-11-3 {
+._qmw7sph-3-12-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._qmw7sph-3-11-3:not(:has(:focus-visible)) {
+._qmw7sph-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spi-3-11-3:not(:has(:focus-visible)) {
+._qmw7spi-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7spj-3-11-3:not(:has(:focus-visible)) {
+._qmw7spj-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spk-3-11-3:not(:has(:focus-visible)) {
+._qmw7spk-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spl-3-11-3:not(:has(:focus-visible)) {
+._qmw7spl-3-12-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spm-3-11-3 {
+._qmw7spm-3-12-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-11-3);
+  color: var(--_bx32h1-3-12-1);
 }
-._qmw7spn-3-11-3 {
+._qmw7spn-3-12-1 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._qmw7spp-3-11-3 {
+._qmw7spp-3-12-1 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/esm/forms/checkbox/Checkbox.js

@@ -186,9 +186,9 @@ const Checkbox = forwardRef(
     });
     useEffect(() => {
       if (inputRef.current) {
-        inputRef.current.indeterminate = value === "indeterminate";
+        inputRef.current.indeterminate = state === "indeterminate";
       }
-    }, [value]);
+    }, [state]);
     let fieldColorVariant = "default";
     if (state === true || state === "indeterminate") {
       fieldColorVariant = "accent";
@@ -259,7 +259,6 @@ const Checkbox = forwardRef(
                           id,
                           ref: inputRef,
                           type: "checkbox",
-                          "aria-checked": state === "indeterminate" ? "mixed" : state,
                           "aria-required": required,
                           "aria-disabled": ariaDisabled,
                           readOnly,

package/esm/forms/checkbox/Checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(combinedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(combinedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = state === 'indeterminate';\n      }\n    }, [state]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
+  "mappings": "AAmTU,SAsBI,KAtBJ;AAnTV,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,oBAAoB,iBAAiB;AAE9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB,4BAA4B;AAC5D,SAAS,uBAAuB;AAOhC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,aAAa,oBAAoB;AAC1C,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAIlC,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAE1C,MAAM,iBAAiB;AA8ChB,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAmB;AAEnB,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM,oBAAoB,sBAAsB,SAAS;AACzD,UAAM,eAAe,qBAAqB,WAAW,iBAAiB;AAEtE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,iBAAiB;AAAA,IACnB,IAAI,eAAe;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IACF,CAAC;AAGD,UAAM,OAAO,QAAQ;AACrB,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,WAAW,OAAyB,IAAI;AAC9C,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,cAAc,aAAoC;AAAA,MACtD;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,wBAAwB,OAE5B,MAAS;AACX,UAAM,uBAAuB;AAAA,MAA0B,CAACA,WACtD,sBAAsB,UAAUA,MAAK;AAAA,IACvC;AACA,UAAM,sBAAsB;AAAA,MAC1B;AAAA,MACA,MAAM,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,IAC/D;AACA,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,IACF,IAAI;AAAA,MACF;AAAA,MACA,EAAE,UAAU,OAAO,OAAO,KAAK,EAAE;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,wBAAoB,aAAa,MAAsB;AACrD,aAAO;AAAA,QACL,SAAS,QAAQ;AAAA,QACjB,UAAU,SAAS;AAAA,QACnB,QAAQ;AACN,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAW;AACT,cAAI,sBAAsB;AACxB,qBAAS,SAAS,cAAc;AAChC,sCAA0B;AAAA,cACxB,MAAM,wBAAwB;AAAA,cAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,YAC7B,CAAC;AACD;AAAA,cACE,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,YACzD;AAAA,UACF;AAAA,QACF;AAAA;AAAA,QAEA,eAAe,YAAY;AACzB,mBAAS,SAAS,cAAc;AAChC,oCAA0B;AAAA,YACxB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AACD,iBAAO;AAAA,YACL,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,UACzD;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAAc,4BAA4B;AAAA,MAC9C;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,eAAe;AAAA,MACf,OAAO,UAAU;AAAA,MACjB;AAAA,MACA;AAAA,IACF,CAAC;AACD,0BAAsB,UAAU,YAAY;AAE5C,UAAM,yBAAyB,YAAY,gBAAgB;AAC3D,UAAM,WAAW,CAAC,CAAC;AAEnB,QAAI,iBAAqD;AACzD,QAAI,WAAW;AACb,uBAAiB;AAAA,IACnB,WAAW,EAAE,YAAY,aAAa,OAAO;AAC3C,uBAAiB;AAAA,IACnB;AAEA,UAAM,iBAAiB,CAAC,MAA2C;AACjE,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,YAAM,WAAW,EAAE,OAAO,gBAAgB,OAAO,EAAE,OAAO;AAC1D,eAAS,QAAQ;AACjB,iBAAW,UAAU,CAAC;AACtB,yBAAmB;AAAA,IACrB;AAEA,UAAM,EAAE,oBAAoB,GAAG,eAAe,IAC5C,kBAAkC;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAEH,cAAU,MAAM;AACd,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,gBAAgB,UAAU;AAAA,MAC7C;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAI,oBAAyD;AAC7D,QAAI,UAAU,QAAQ,UAAU,iBAAiB;AAC/C,0BAAoB;AAAA,IACtB,WAAW,aAAa,wBAAwB;AAC9C,0BAAoB;AAAA,IACtB;AAEA,QAAI,kBAAsD;AAC1D,QAAI,WAAW;AACb,wBAAkB;AAAA,IACpB,WAAW,UAAU,OAAO;AAC1B,wBAAkB;AAAA,IACpB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,eAAc;AAAA,QACd,KAAK;AAAA,QACL,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,QACrD,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG,WAAW,cAAc,uBAAuB;AAAA,QACpD,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAW;AAAA,gBACT,iBAAiB;AAAA,kBACf,UAAU,OAAO,aAAa,YAAY;AAAA,kBAC1C,UAAU;AAAA,kBACV;AAAA,gBACF,CAAC;AAAA,gBACD,aAAa,EAAE,WAAW,QAAQ,WAAW,OAAO,CAAC;AAAA,cACvD;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT,gBAAgB;AAAA,wBACd,UAAU;AAAA,wBACV,aAAa,CAAC,CAAC;AAAA,wBACf,UAAU;AAAA,wBACV,SAAS,UAAU,QAAQ,UAAU;AAAA,wBACrC;AAAA,sBACF,CAAC;AAAA,sBACD,eAAe;AAAA,wBACb,SAAS;AAAA,wBACT,UAAU;AAAA,wBACV,OAAO;AAAA,sBACT,CAAC;AAAA,sBACD,gBAAgB;AAAA,wBACd,MAAM;AAAA,wBACN,OAAO;AAAA,wBACP;AAAA,sBACF,CAAC;AAAA,oBACH;AAAA,oBAEA;AAAA,0CAAC,kBACC;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA,KAAK;AAAA,0BACL,MAAK;AAAA,0BACL,iBAAe;AAAA,0BACf,iBAAe;AAAA,0BACf;AAAA,0BACA;AAAA,0BACA,MAAM;AAAA,0BACN,OAAO;AAAA,0BACP;AAAA,0BACA;AAAA,0BACA,SAAS,UAAU;AAAA,0BACnB,UAAU;AAAA,0BACV,WAAW;AAAA,0BACV,GAAI,eAAe,aAAa;AAAA;AAAA,sBACnC,GACF;AAAA,sBACA,oBAAC,SAAI,WAAW,gBAAgB,EAAE,UAAU,UAAU,UAAU,CAAC,GAC/D,8BAAC,mBAAgB,OAAc,GACjC;AAAA;AAAA;AAAA,gBACF;AAAA,gBACC;AAAA;AAAA;AAAA,UACH;AAAA,UACC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,YAAY,UAAU;AAAA,cAC/B,UAAU;AAAA,cACT,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,SAAuD,cACtD;AAOF,MAAM,kBAAkB,KAAK,CAAC,UAA6B;AACzD,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK;AACH,aAAO,oBAAC,sBAAmB;AAAA,IAC7B,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF,CAAC;",
   "names": ["state"]
 }

package/esm/forms/checkbox/Checkbox.sty.js

@@ -2,9 +2,9 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Checkbox.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-11-3", variantClassNames: { readOnly: { true: "_qmw7spn-3-11-3" }, hasError: { true: "_qmw7spo-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-11-3"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-11-3", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-11-3", false: "_qmw7sp6-3-11-3" }, disabled: { true: "_qmw7sp7-3-11-3", false: "_qmw7sp8-3-11-3" }, hasError: { true: "_qmw7sp9-3-11-3", false: "_qmw7spa-3-11-3" }, checked: { true: "_qmw7spb-3-11-3", false: "_qmw7spc-3-11-3", indeterminate: "_qmw7spd-3-11-3", undefined: "_qmw7spe-3-11-3" }, readOnly: { true: "_qmw7spf-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-11-3"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-11-3"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-11-3"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-11-3"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-11-3"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-11-3"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-11-3", variantClassNames: { disabled: { true: "_qmw7sp1-3-11-3" }, required: { true: "_qmw7sp2-3-11-3" }, readOnly: { true: "_qmw7sp3-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-12-1", variantClassNames: { readOnly: { true: "_qmw7spn-3-12-1" }, hasError: { true: "_qmw7spo-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-12-1"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-12-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-12-1", false: "_qmw7sp6-3-12-1" }, disabled: { true: "_qmw7sp7-3-12-1", false: "_qmw7sp8-3-12-1" }, hasError: { true: "_qmw7sp9-3-12-1", false: "_qmw7spa-3-12-1" }, checked: { true: "_qmw7spb-3-12-1", false: "_qmw7spc-3-12-1", indeterminate: "_qmw7spd-3-12-1", undefined: "_qmw7spe-3-12-1" }, readOnly: { true: "_qmw7spf-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-12-1"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-12-1"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-12-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-12-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-12-1"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-12-1"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-12-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-12-1" }, required: { true: "_qmw7sp2-3-12-1" }, readOnly: { true: "_qmw7sp3-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

package/esm/forms/checkbox/Checkbox.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-11-3',variantClassNames:{readOnly:{true:'_qmw7spn-3-11-3'},hasError:{true:'_qmw7spo-3-11-3'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-11-3']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-11-3',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-11-3',false:'_qmw7sp6-3-11-3'},disabled:{true:'_qmw7sp7-3-11-3',false:'_qmw7sp8-3-11-3'},hasError:{true:'_qmw7sp9-3-11-3',false:'_qmw7spa-3-11-3'},checked:{true:'_qmw7spb-3-11-3',false:'_qmw7spc-3-11-3',indeterminate:'_qmw7spd-3-11-3',undefined:'_qmw7spe-3-11-3'},readOnly:{true:'_qmw7spf-3-11-3'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-11-3'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-11-3'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-11-3'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-11-3'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-11-3'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-11-3']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-11-3',variantClassNames:{disabled:{true:'_qmw7sp1-3-11-3'},required:{true:'_qmw7sp2-3-11-3'},readOnly:{true:'_qmw7sp3-3-11-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-12-1',variantClassNames:{readOnly:{true:'_qmw7spn-3-12-1'},hasError:{true:'_qmw7spo-3-12-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-12-1']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-12-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-12-1',false:'_qmw7sp6-3-12-1'},disabled:{true:'_qmw7sp7-3-12-1',false:'_qmw7sp8-3-12-1'},hasError:{true:'_qmw7sp9-3-12-1',false:'_qmw7spa-3-12-1'},checked:{true:'_qmw7spb-3-12-1',false:'_qmw7spc-3-12-1',indeterminate:'_qmw7spd-3-12-1',undefined:'_qmw7spe-3-12-1'},readOnly:{true:'_qmw7spf-3-12-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-12-1'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-12-1'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-12-1'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-12-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-12-1'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-12-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-12-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-12-1'},required:{true:'_qmw7sp2-3-12-1'},readOnly:{true:'_qmw7sp3-3-12-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACjP,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,eAAc,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACz1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePicker.css

@@ -1,85 +1,85 @@
-._1i883gj4-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj3-3-11-3: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj4-3-12-1 {
+  --_1i883gj0-3-12-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-12-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-12-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj3-3-12-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj5-3-11-3 {
+._1i883gj5-3-12-1 {
   cursor: default;
 }
-._1i883gj6-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj3-3-11-3: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj6-3-12-1 {
+  --_1i883gj0-3-12-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-12-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-12-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj3-3-12-1: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj7-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+._1i883gj7-3-12-1 {
+  --_1i883gj0-3-12-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-12-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-12-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   cursor: not-allowed;
 }
-._1i883gj9-3-11-3 {
+._1i883gj9-3-12-1 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjb-3-11-3 {
+._1i883gjb-3-12-1 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-11-3);
+  color: var(--_1i883gj1-3-12-1);
   white-space-collapse: preserve;
 }
-._1i883gjc-3-11-3 {
+._1i883gjc-3-12-1 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3 {
-  color: var(--_1i883gj0-3-11-3);
+._r47o0w0-3-12-1 ._r47o0w1-3-12-1 {
+  color: var(--_1i883gj0-3-12-1);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3::before {
-  color: var(--_1i883gj1-3-11-3);
+._r47o0w0-3-12-1 ._r47o0w1-3-12-1::before {
+  color: var(--_1i883gj1-3-12-1);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus {
-  background-color: var(--_1i883gj3-3-11-3);
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus {
+  background-color: var(--_1i883gj3-3-12-1);
+  color: var(--_1i883gj2-3-12-1);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus::before {
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus::before {
+  color: var(--_1i883gj2-3-12-1);
 }
-._r47o0w0-3-11-3 *::selection {
+._r47o0w0-3-12-1 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus::selection, ._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus *::selection {
+._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus::selection, ._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj2-3-11-3);
+  color: var(--_1i883gj2-3-12-1);
 }
-._r47o0w0-3-11-3 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-11-3[data-drag-selected]::before {
-  background-color: var(--_1i883gj3-3-11-3);
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-1 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-12-1[data-drag-selected]::before {
+  background-color: var(--_1i883gj3-3-12-1);
+  color: var(--_1i883gj2-3-12-1);
 }
-._r47o0w0-3-11-3 [data-drag-selected]::selection, ._r47o0w0-3-11-3 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-12-1 [data-drag-selected]::selection, ._r47o0w0-3-12-1 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-11-3:focus {
+[data-shift-selection=true] ._r47o0w1-3-12-1:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-11-3);
+  color: var(--_1i883gj0-3-12-1);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-11-3:focus::before {
-  color: var(--_1i883gj1-3-11-3);
+[data-shift-selection=true] ._r47o0w1-3-12-1:focus::before {
+  color: var(--_1i883gj1-3-12-1);
 }
-._1i883gjd-3-11-3 {
+._1i883gjd-3-12-1 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjd-3-11-3:is(button._1i883gjd-3-11-3._1i883gjd-3-11-3) {
+._1i883gjd-3-12-1:is(button._1i883gjd-3-12-1._1i883gjd-3-12-1) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-11-3 ._1i883gjd-3-11-3._1i883gjd-3-11-3._1i883gjd-3-11-3 {
+._1jgl8s50-3-12-1 ._1i883gjd-3-12-1._1i883gjd-3-12-1._1i883gjd-3-12-1 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

package/esm/forms/date-time-picker/DateTimePicker.sty.js

@@ -3,12 +3,12 @@ import "../../styles/textStyle.css";
 import "../spin-buttons/SpinButton.css";
 import "./DateTimePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearIconButton = "_1i883gjd-3-11-3";
-var dateSelector = "_1i883gjc-3-11-3";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-11-3", variantClassNames: { readOnly: { true: "_1i883gj5-3-11-3" }, showError: { true: "_1i883gj6-3-11-3" }, disabled: { true: "_1i883gj7-3-11-3" }, type: { date: "_1i883gj8-3-11-3", time: "_1i883gj9-3-11-3", datetime: "_1i883gja-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var spinButtonGroup = "_1i883gjb-3-11-3 _da9a8v0-3-11-3 _da9a8v2-3-11-3 _da9a8v3-3-11-3 _da9a8vb-3-11-3";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-11-3)";
-var spinButtonSelectionColorVar = "var(--_1i883gj2-3-11-3)";
+var clearIconButton = "_1i883gjd-3-12-1";
+var dateSelector = "_1i883gjc-3-12-1";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-12-1", variantClassNames: { readOnly: { true: "_1i883gj5-3-12-1" }, showError: { true: "_1i883gj6-3-12-1" }, disabled: { true: "_1i883gj7-3-12-1" }, type: { date: "_1i883gj8-3-12-1", time: "_1i883gj9-3-12-1", datetime: "_1i883gja-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjb-3-12-1 _da9a8v0-3-12-1 _da9a8v2-3-12-1 _da9a8v3-3-12-1 _da9a8vb-3-12-1";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-12-1)";
+var spinButtonSelectionColorVar = "var(--_1i883gj2-3-12-1)";
 export {
   clearIconButton,
   dateSelector,

package/esm/forms/date-time-picker/DateTimePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjd-3-11-3';\nexport var dateSelector = '_1i883gjc-3-11-3';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-11-3',variantClassNames:{readOnly:{true:'_1i883gj5-3-11-3'},showError:{true:'_1i883gj6-3-11-3'},disabled:{true:'_1i883gj7-3-11-3'},type:{date:'_1i883gj8-3-11-3',time:'_1i883gj9-3-11-3',datetime:'_1i883gja-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-11-3 _da9a8v0-3-11-3 _da9a8v2-3-11-3 _da9a8v3-3-11-3 _da9a8vb-3-11-3';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-11-3)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-11-3)';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjd-3-12-1';\nexport var dateSelector = '_1i883gjc-3-12-1';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-12-1',variantClassNames:{readOnly:{true:'_1i883gj5-3-12-1'},showError:{true:'_1i883gj6-3-12-1'},disabled:{true:'_1i883gj7-3-12-1'},type:{date:'_1i883gj8-3-12-1',time:'_1i883gj9-3-12-1',datetime:'_1i883gja-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-12-1 _da9a8v0-3-12-1 _da9a8v2-3-12-1 _da9a8v3-3-12-1 _da9a8vb-3-12-1';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-12-1)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-12-1)';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,MAAK,EAAC,MAAK,oBAAmB,MAAK,oBAAmB,UAAS,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzT,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePickerRoot.js

@@ -33,6 +33,7 @@ import { isExpressionTriggerKey } from "../date-time-range-picker/expression-tri
 import { isContentModifyingKey } from "../date-time-range-picker/helpers.js";
 import { onTimeframeCopyCapture } from "../date-time-range-picker/selection-copy-helpers.js";
 import { useSelectionInteractionHandlers } from "../date-time-range-picker/useSelectionInteractionHandlers.js";
+import { useInternalFormRegistration } from "../form/hooks/useInternalFormRegistration.js";
 import { InternalBaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useMinMaxLogger } from "../forms-core/hooks/useMinMaxLogger.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -50,6 +51,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     placeholder,
     name,
+    _form,
+    _messageTarget,
     type = "datetime",
     formControl,
     onValidityChange,
@@ -67,6 +70,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     hintProps,
     hint,
     showError,
+    messageState,
     messageDispatch: formFieldDispatch
   } = formControl;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -90,6 +94,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
   useMinMaxLogger(min, max, "DateTimePicker");
   const ownerId = useId();
   const touchedContainerRef = useRef(null);
+  const customMessagesRef = useRef(messageState.customMessages);
+  customMessagesRef.current = messageState.customMessages;
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const ariaLabelingProps = useAriaLabelingProps(remainingProps);
   const showDateSelector = type !== "time";
@@ -110,7 +116,10 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     id: "5i26Rr1LLz0OIGNJ",
     description: "Aria label for the DateTimePicker clear button."
   });
-  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const formValidityChangeRef = useRef(void 0);
+  const _emitValidationState = useValidationStateEmitter(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const emitValidationState = useCustomMessageEmitter(
     _emitValidationState,
     () => buildValidationState("manual", dateTimePickerError)
@@ -144,6 +153,58 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     emitValidationState,
     getBlurValidationState: () => buildValidationState("blur", dateTimePickerError)
   });
+  const validateField = useCallback(
+    async ({
+      reveal,
+      trigger
+    }) => {
+      if (reveal) {
+        formFieldDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+      }
+      return emitValidationState(
+        buildValidationState(trigger, dateTimePickerError)
+      );
+    },
+    [
+      formFieldDispatch,
+      emitValidationState,
+      buildValidationState,
+      dateTimePickerError
+    ]
+  );
+  const resetValidation = useCallback(() => {
+    formFieldDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: false, resetShowError: true }
+    });
+    if (dateTimePickerError) {
+      formFieldDispatch?.({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: dateTimePickerError, messageType: "formcontrol" }
+      });
+    }
+    for (const msg of customMessagesRef.current) {
+      formFieldDispatch?.({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: msg.id, messageType: "custom" }
+      });
+    }
+  }, [formFieldDispatch, dateTimePickerError]);
+  const formRegistration = useInternalFormRegistration({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    onValidityChange,
+    getValue: () => value,
+    focus: () => dateInputRef.current?.inputRef?.focus(),
+    validateField,
+    resetValidation
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   useImperativeHandle(
     forwardedRef,
     () => ({
@@ -180,7 +241,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
       formFieldDispatch,
       dateInputRef,
       emitValidationState,
-      buildValidationState
+      buildValidationState,
+      dateTimePickerError
     ]
   );
   useEffect(() => {
@@ -312,6 +374,7 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
                         readOnly,
                         placeholder,
                         name,
+                        form: _form,
                         value,
                         onChange: (newValue) => {
                           if (typeof newValue !== "string") {