@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/forms/toggle-button-group/ToggleButtonGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/ToggleButtonGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  type SyntheticEvent,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@dynatrace/strato-icons';\n\nimport { ToggleButtonGroupContext } from './contexts/ToggleButtonGroupContext.js';\nimport { Item } from './Item.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.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 { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { getI18nValidationState } 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 = 'ToggleButtonGroup';\n\n//#region typings\n/**\n * Accepted properties for ToggleButtonGroup\n * @public\n */\nexport type ToggleButtonGroupProps = FormControlProps<\n  string,\n  (\n    value: string,\n    event?: SyntheticEvent<HTMLElement | SVGElement>,\n  ) => void | never,\n  HTMLDivElement\n> &\n  PropsWithChildren &\n  DOMProps &\n  StylingProps &\n  DataTestId &\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     * The width of the ToggleButtonGroup.\n     * @defaultValue 'content'\n     */\n    width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n  };\n//#endregion\n\nconst ToggleButtonGroupRoot = forwardRef<\n  FormControlRef<HTMLDivElement> | HTMLDivElement | null,\n  ToggleButtonGroupProps\n>((props, forwardedRef) => {\n  const fallbackName = useId();\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    value,\n    defaultValue,\n    name = fallbackName,\n    _form,\n    _messageTarget,\n    width = 'content',\n    onChange,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'aria-disabled': propAriaDisabled,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    ...remainingProps\n  }: ToggleButtonGroupProps = props;\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\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    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n  const { formFieldLabelId } = useFormFieldContext();\n  const groupLabelledby =\n    ariaLabelledby ?? (ariaLabel === undefined ? formFieldLabelId : undefined);\n\n  const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n  const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n  const {\n    id: formControlId,\n    disabled: formControlDisabled,\n    required: isRequired,\n    ariaDisabled,\n    readOnly: isReadOnly,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n  });\n\n  const isDisabled = propDisabled ?? formControlDisabled;\n  const isDisabledOrAriaDisabled = isDisabled || ariaDisabled;\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const formControl = useInternalFormRegistration({\n    id: formControlId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => selectedValue ?? null,\n    focus: () => {\n      const checkedInput = wrapperRef.current?.querySelector(\n        'input:checked',\n      ) as HTMLInputElement | null;\n      (\n        checkedInput ??\n        (wrapperRef.current?.querySelector('input') as HTMLInputElement | null)\n      )?.focus();\n    },\n    validateField: ({ reveal, trigger }) => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.checkValidity());\n      if (reveal) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const firstInput = wrapperRef.current?.querySelector(\n        'input',\n      ) as HTMLInputElement | null;\n      return Promise.resolve(\n        emitValidationState(getI18nValidationState(intl, firstInput, trigger)),\n      );\n    },\n    resetValidation: () => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.setCustomValidity(''));\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  useImperativeHandle<\n    FormControlRef<HTMLDivElement> | HTMLDivElement | null,\n    FormControlRef<HTMLDivElement> | HTMLDivElement | null\n  >(\n    forwardedRef,\n    () => {\n      const newRef = {\n        element: wrapperRef.current,\n        focus() {\n          const checkedInput = wrapperRef.current?.querySelector(\n            'input:checked',\n          ) as HTMLInputElement;\n          (\n            checkedInput ??\n            (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n          )?.focus();\n        },\n        validate() {\n          wrapperRef.current\n            ?.querySelectorAll('input')\n            ?.forEach((i) => i.checkValidity());\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          const firstInput = wrapperRef.current?.querySelector(\n            'input',\n          ) as HTMLInputElement | null;\n          emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          wrapperRef.current\n            ?.querySelectorAll('input')\n            ?.forEach((i) => i.checkValidity());\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          const firstInput = wrapperRef.current?.querySelector(\n            'input',\n          ) as HTMLInputElement | null;\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        },\n      };\n\n      if (!wrapperRef.current) {\n        return null;\n      }\n\n      return new Proxy<HTMLDivElement>(wrapperRef.current, {\n        get: function <\n          Property extends keyof HTMLDivElement &\n            'element' &\n            'focus' &\n            'validate' &\n            'validateAsync',\n        >(target: HTMLDivElement, property: Property) {\n          if (property in newRef) {\n            return newRef[property];\n          }\n          return target[property];\n        },\n      });\n    },\n    [messagesContextDispatch, emitValidationState],\n  );\n\n  const handleChange = useCallback(\n    (value: string, event?: SyntheticEvent<HTMLElement | SVGElement>) => {\n      setSelectedValue?.(value);\n      onChange?.(value, event);\n    },\n    [onChange, setSelectedValue],\n  );\n\n  const customWidth =\n    width !== 'content' && width !== 'full' ? width : undefined;\n\n  const [slots] = useSlots(children, {\n    items: { match: Item, multiple: true },\n    prefix: Prefix,\n    suffix: Suffix,\n  });\n\n  const valueProps = useMemo(\n    () => ({\n      name,\n      form: _form,\n      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      onChange: handleChange,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      _form,\n      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      handleChange,\n      emitValidationState,\n    ],\n  );\n\n  const scrollButtonVariant = useVisualRefreshEnabled()\n    ? 'default'\n    : 'emphasized';\n\n  const color = hasError && !isDisabledOrAriaDisabled ? 'critical' : 'neutral';\n\n  const { width: containerWidth } = useContainerSize(containerRef);\n\n  const updateOverflow = useCallback(() => {\n    if (containerRef.current) {\n      const { scrollLeft, scrollWidth, offsetWidth } = containerRef.current;\n      const tolerance = 4; // px\n      setIsOverflowingLeft(scrollLeft > tolerance);\n      setIsOverflowingRight(scrollLeft + offsetWidth < scrollWidth - tolerance);\n    }\n  }, []);\n\n  const slideTabs = (modifier: 1 | -1): void => {\n    const container = containerRef.current;\n    if (container) {\n      container.scrollBy({\n        left: (modifier * container.offsetWidth) / 2,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  useEffect(() => {\n    updateOverflow();\n  }, [containerWidth, updateOverflow]);\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled: isDisabled,\n    });\n\n  return (\n    <div\n      className={clsx(\n        containerClassName,\n        styles.container,\n        {\n          [styles.disabledGroup]: isDisabledOrAriaDisabled,\n          [styles.error]: hasError,\n          [styles.readOnly]: isReadOnly,\n          [styles.containerWidths.content]: width === 'content',\n          [styles.containerWidths.full]: width === 'full',\n        },\n        consumerClassName,\n      )}\n      style={{ maxWidth: customWidth, ...consumerStyle }}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"horizontal\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      aria-disabled={ariaDisabled}\n      aria-labelledby={groupLabelledby}\n      id={formControlId}\n      ref={wrapperRef}\n      {...containerProps}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {isOverflowingLeft && (\n        <Button\n          className={styles.scrollButton}\n          style={{ left: '4px', position: 'absolute', top: '4px' }}\n          variant={scrollButtonVariant}\n          color={color}\n          onClick={() => slideTabs(-1)}\n          size=\"condensed\"\n        >\n          <Button.Prefix>\n            <ChevronLeftIcon />\n          </Button.Prefix>\n        </Button>\n      )}\n      <Flex\n        ref={containerRef}\n        gap={0}\n        onScroll={updateOverflow}\n        className={clsx(styles.scrollContainer, {\n          [styles.scrollVariants.left]:\n            isOverflowingLeft && !isOverflowingRight,\n          [styles.scrollVariants.right]:\n            !isOverflowingLeft && isOverflowingRight,\n          [styles.scrollVariants.both]: isOverflowingLeft && isOverflowingRight,\n        })}\n      >\n        <ToggleButtonGroupContext.Provider value={valueProps}>\n          {slots.items?.map((slot, index) => {\n            const items = slots.items ?? [];\n            const value = slot.props.value;\n\n            const isSelected = value === selectedValue;\n            const isLast = index === items.length - 1;\n            const nextItem = items[index + 1];\n            const nextItemValue = nextItem?.props?.value;\n\n            const nextIsSelected = nextItemValue === selectedValue;\n            return (\n              <Fragment key={slot.props.value ?? slot.props.id ?? index}>\n                {slot}\n                {!isLast && (\n                  <Divider\n                    orientation=\"vertical\"\n                    className={clsx(styles.divider, {\n                      [styles.hidden]: isSelected || nextIsSelected,\n                    })}\n                    aria-hidden\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </ToggleButtonGroupContext.Provider>\n      </Flex>\n      {isOverflowingRight && (\n        <Button\n          className={styles.scrollButton}\n          style={{ right: '4px', position: 'absolute', top: '4px ' }}\n          variant={scrollButtonVariant}\n          color={color}\n          onClick={() => slideTabs(1)}\n          size=\"condensed\"\n        >\n          <Button.Suffix>\n            <ChevronRightIcon />\n          </Button.Suffix>\n        </Button>\n      )}\n    </div>\n  );\n});\n\n/**\n * `ToggleButtonGroup` lets users toggle between a set of related options, typically with one preselected. It's best for switching between views or a compact group of options with immediate effect.\n * @public\n */\nexport const ToggleButtonGroup = Object.assign(ToggleButtonGroupRoot, {\n  Item,\n  Suffix,\n  Prefix,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  type SyntheticEvent,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@dynatrace/strato-icons';\n\nimport { ToggleButtonGroupContext } from './contexts/ToggleButtonGroupContext.js';\nimport { Item } from './Item.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.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 { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { getI18nValidationState } 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 = 'ToggleButtonGroup';\n\n//#region typings\n/**\n * Accepted properties for ToggleButtonGroup\n * @public\n */\nexport type ToggleButtonGroupProps = FormControlProps<\n  string,\n  (\n    value: string,\n    event?: SyntheticEvent<HTMLElement | SVGElement>,\n  ) => void | never,\n  HTMLDivElement\n> &\n  PropsWithChildren &\n  DOMProps &\n  StylingProps &\n  DataTestId &\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     * The width of the ToggleButtonGroup.\n     * @defaultValue 'content'\n     */\n    width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n  };\n//#endregion\n\nconst ToggleButtonGroupRoot = forwardRef<\n  FormControlRef<HTMLDivElement> | HTMLDivElement | null,\n  ToggleButtonGroupProps\n>((props, forwardedRef) => {\n  const fallbackName = useId();\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    value,\n    defaultValue,\n    name = fallbackName,\n    _form,\n    _messageTarget,\n    width = 'content',\n    onChange,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'aria-disabled': propAriaDisabled,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    ...remainingProps\n  }: ToggleButtonGroupProps = props;\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\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    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n  const { formFieldLabelId } = useFormFieldContext();\n  const groupLabelledby =\n    ariaLabelledby ?? (ariaLabel === undefined ? formFieldLabelId : undefined);\n\n  const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n  const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n  const {\n    id: formControlId,\n    disabled: formControlDisabled,\n    required: isRequired,\n    ariaDisabled,\n    readOnly: isReadOnly,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n  });\n\n  const isDisabled = propDisabled ?? formControlDisabled;\n  const isDisabledOrAriaDisabled = isDisabled || ariaDisabled;\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const formControl = useInternalFormRegistration({\n    id: formControlId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => selectedValue ?? null,\n    focus: () => {\n      const checkedInput = wrapperRef.current?.querySelector(\n        'input:checked',\n      ) as HTMLInputElement | null;\n      (\n        checkedInput ??\n        (wrapperRef.current?.querySelector('input') as HTMLInputElement | null)\n      )?.focus();\n    },\n    validateField: ({ reveal, trigger }) => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.checkValidity());\n      if (reveal) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const firstInput = wrapperRef.current?.querySelector(\n        'input',\n      ) as HTMLInputElement | null;\n      return Promise.resolve(\n        emitValidationState(getI18nValidationState(intl, firstInput, trigger)),\n      );\n    },\n    resetValidation: () => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.setCustomValidity(''));\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  useImperativeHandle<\n    FormControlRef<HTMLDivElement> | HTMLDivElement | null,\n    FormControlRef<HTMLDivElement> | HTMLDivElement | null\n  >(forwardedRef, () => {\n    const newRef = {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n\n    if (!wrapperRef.current) {\n      return null;\n    }\n\n    return new Proxy<HTMLDivElement>(wrapperRef.current, {\n      get: function <\n        Property extends keyof HTMLDivElement &\n          'element' &\n          'focus' &\n          'validate' &\n          'validateAsync',\n      >(target: HTMLDivElement, property: Property) {\n        if (property in newRef) {\n          return newRef[property];\n        }\n        return target[property];\n      },\n    });\n  }, [messagesContextDispatch, emitValidationState]);\n\n  const handleChange = useCallback(\n    (value: string, event?: SyntheticEvent<HTMLElement | SVGElement>) => {\n      setSelectedValue?.(value);\n      onChange?.(value, event);\n    },\n    [onChange, setSelectedValue],\n  );\n\n  const customWidth =\n    width !== 'content' && width !== 'full' ? width : undefined;\n\n  const [slots] = useSlots(children, {\n    items: { match: Item, multiple: true },\n    prefix: Prefix,\n    suffix: Suffix,\n  });\n\n  const valueProps = useMemo(\n    () => ({\n      name,\n      form: _form,\n      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      onChange: handleChange,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      _form,\n      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      handleChange,\n      emitValidationState,\n    ],\n  );\n\n  const scrollButtonVariant = useVisualRefreshEnabled()\n    ? 'default'\n    : 'emphasized';\n\n  const color = hasError && !isDisabledOrAriaDisabled ? 'critical' : 'neutral';\n\n  const { width: containerWidth } = useContainerSize(containerRef);\n\n  const updateOverflow = useCallback(() => {\n    if (containerRef.current) {\n      const { scrollLeft, scrollWidth, offsetWidth } = containerRef.current;\n      const tolerance = 4; // px\n      setIsOverflowingLeft(scrollLeft > tolerance);\n      setIsOverflowingRight(scrollLeft + offsetWidth < scrollWidth - tolerance);\n    }\n  }, []);\n\n  const slideTabs = (modifier: 1 | -1): void => {\n    const container = containerRef.current;\n    if (container) {\n      container.scrollBy({\n        left: (modifier * container.offsetWidth) / 2,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  useEffect(() => {\n    updateOverflow();\n  }, [containerWidth, updateOverflow]);\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled: isDisabled,\n    });\n\n  return (\n    <div\n      className={clsx(\n        containerClassName,\n        styles.container,\n        {\n          [styles.disabledGroup]: isDisabledOrAriaDisabled,\n          [styles.error]: hasError,\n          [styles.readOnly]: isReadOnly,\n          [styles.containerWidths.content]: width === 'content',\n          [styles.containerWidths.full]: width === 'full',\n        },\n        consumerClassName,\n      )}\n      style={{ maxWidth: customWidth, ...consumerStyle }}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"horizontal\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      aria-disabled={ariaDisabled}\n      aria-labelledby={groupLabelledby}\n      id={formControlId}\n      ref={wrapperRef}\n      {...containerProps}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {isOverflowingLeft && (\n        <Button\n          className={styles.scrollButton}\n          style={{ left: '4px', position: 'absolute', top: '4px' }}\n          variant={scrollButtonVariant}\n          color={color}\n          onClick={() => slideTabs(-1)}\n          size=\"condensed\"\n        >\n          <Button.Prefix>\n            <ChevronLeftIcon />\n          </Button.Prefix>\n        </Button>\n      )}\n      <Flex\n        ref={containerRef}\n        gap={0}\n        onScroll={updateOverflow}\n        className={clsx(styles.scrollContainer, {\n          [styles.scrollVariants.left]:\n            isOverflowingLeft && !isOverflowingRight,\n          [styles.scrollVariants.right]:\n            !isOverflowingLeft && isOverflowingRight,\n          [styles.scrollVariants.both]: isOverflowingLeft && isOverflowingRight,\n        })}\n      >\n        <ToggleButtonGroupContext.Provider value={valueProps}>\n          {slots.items?.map((slot, index) => {\n            const items = slots.items ?? [];\n            const value = slot.props.value;\n\n            const isSelected = value === selectedValue;\n            const isLast = index === items.length - 1;\n            const nextItem = items[index + 1];\n            const nextItemValue = nextItem?.props?.value;\n\n            const nextIsSelected = nextItemValue === selectedValue;\n            return (\n              <Fragment key={slot.props.value ?? slot.props.id ?? index}>\n                {slot}\n                {!isLast && (\n                  <Divider\n                    orientation=\"vertical\"\n                    className={clsx(styles.divider, {\n                      [styles.hidden]: isSelected || nextIsSelected,\n                    })}\n                    aria-hidden\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </ToggleButtonGroupContext.Provider>\n      </Flex>\n      {isOverflowingRight && (\n        <Button\n          className={styles.scrollButton}\n          style={{ right: '4px', position: 'absolute', top: '4px ' }}\n          variant={scrollButtonVariant}\n          color={color}\n          onClick={() => slideTabs(1)}\n          size=\"condensed\"\n        >\n          <Button.Suffix>\n            <ChevronRightIcon />\n          </Button.Suffix>\n        </Button>\n      )}\n    </div>\n  );\n});\n\n/**\n * `ToggleButtonGroup` lets users toggle between a set of related options, typically with one preselected. It's best for switching between views or a compact group of options with immediate effect.\n * @public\n */\nexport const ToggleButtonGroup = Object.assign(ToggleButtonGroupRoot, {\n  Item,\n  Suffix,\n  Prefix,\n});\n"],
+  "mappings": "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",
   "names": ["value"]
 }

package/esm/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh1-3-13-3 {
-  --_w5wkeh0-3-13-3: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-14-1 {
+  --_w5wkeh0-3-14-1: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh5-3-13-3:not(._w5wkeh4-3-13-3) {
+._w5wkeh5-3-14-1:not(._w5wkeh4-3-14-1) {
   cursor: not-allowed;
 }
-._w5wkeh6-3-13-3 {
+._w5wkeh6-3-14-1 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh7-3-13-3 {
+._w5wkeh7-3-14-1 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -23,40 +23,40 @@
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._1jgl8s50-3-13-3 ._w5wkeh7-3-13-3 {
+._1jgl8s50-3-14-1 ._w5wkeh7-3-14-1 {
   background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
 }
-._w5wkeh7-3-13-3._w5wkeh2-3-13-3 {
+._w5wkeh7-3-14-1._w5wkeh2-3-14-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-13-3._w5wkeh5-3-13-3 {
+._w5wkeh7-3-14-1._w5wkeh5-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkeh7-3-13-3._w5wkeh4-3-13-3 {
+._w5wkeh7-3-14-1._w5wkeh4-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh7-3-13-3._w5wkeh4-3-13-3._w5wkeh2-3-13-3 {
+._w5wkeh7-3-14-1._w5wkeh4-3-14-1._w5wkeh2-3-14-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh8-3-13-3 {
+._w5wkeh8-3-14-1 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh2-3-13-3:not(._w5wkeh5-3-13-3) ._w5wkeh8-3-13-3 {
+._w5wkeh2-3-14-1:not(._w5wkeh5-3-14-1) ._w5wkeh8-3-14-1 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh9-3-13-3 {
+._w5wkeh9-3-14-1 {
   width: 100%;
 }
-._w5wkeha-3-13-3 {
+._w5wkeha-3-14-1 {
   width: fit-content;
 }
-._w5wkehb-3-13-3 {
+._w5wkehb-3-14-1 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -64,36 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkehb-3-13-3::-webkit-scrollbar {
+._w5wkehb-3-14-1::-webkit-scrollbar {
   display: none;
 }
-._w5wkehc-3-13-3 {
+._w5wkehc-3-14-1 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-13-3 {
+._w5wkehd-3-14-1 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehe-3-13-3 {
+._w5wkehe-3-14-1 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehf-3-13-3 {
+._w5wkehf-3-14-1 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._1jgl8s50-3-13-3 ._w5wkehf-3-13-3:hover:not(._w5wkeh2-3-13-3 ._w5wkehf-3-13-3) {
-  --_bx32h3-3-13-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-14-1 ._w5wkehf-3-14-1:hover:not(._w5wkeh2-3-14-1 ._w5wkehf-3-14-1) {
+  --_bx32h3-3-14-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-13-3 ._w5wkehf-3-13-3:active:not(._w5wkeh2-3-13-3 ._w5wkehf-3-13-3) {
-  --_bx32h3-3-13-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-14-1 ._w5wkehf-3-14-1:active:not(._w5wkeh2-3-14-1 ._w5wkehf-3-14-1) {
+  --_bx32h3-3-14-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._w5wkehg-3-13-3 {
+._w5wkehg-3-14-1 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -109,93 +109,93 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
-  box-shadow: var(--_w5wkeh0-3-13-3);
+  box-shadow: var(--_w5wkeh0-3-14-1);
 }
-._w5wkehg-3-13-3:hover {
+._w5wkehg-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._w5wkehg-3-13-3:active {
+._w5wkehg-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._w5wkehg-3-13-3 {
+._1jgl8s50-3-14-1 ._w5wkehg-3-14-1 {
   margin: 0;
   padding: 5px var(--dt-spacings-size-6, 6px);
   border-radius: 5px;
 }
-._w5wkeh2-3-13-3 ._w5wkehg-3-13-3 {
+._w5wkeh2-3-14-1 ._w5wkehg-3-14-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh2-3-13-3 ._w5wkehg-3-13-3:hover {
+._w5wkeh2-3-14-1 ._w5wkehg-3-14-1:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._w5wkeh2-3-13-3 ._w5wkehg-3-13-3:active {
+._w5wkeh2-3-14-1 ._w5wkehg-3-14-1:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._w5wkehg-3-13-3._w5wkeh3-3-13-3 {
+._w5wkehg-3-14-1._w5wkeh3-3-14-1 {
   cursor: not-allowed;
   background-color: transparent;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkehg-3-13-3._w5wkeh3-3-13-3:hover {
+._w5wkehg-3-14-1._w5wkeh3-3-14-1:hover {
   background-color: transparent;
 }
-._w5wkehg-3-13-3._w5wkeh3-3-13-3:active {
+._w5wkehg-3-14-1._w5wkeh3-3-14-1:active {
   background-color: transparent;
 }
-._w5wkeh2-3-13-3 ._w5wkehg-3-13-3._w5wkeh3-3-13-3 {
+._w5wkeh2-3-14-1 ._w5wkehg-3-14-1._w5wkeh3-3-14-1 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._w5wkehg-3-13-3._w5wkeh4-3-13-3 {
+._w5wkehg-3-14-1._w5wkeh4-3-14-1 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehg-3-13-3._w5wkeh4-3-13-3:hover {
+._w5wkehg-3-14-1._w5wkeh4-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkehg-3-13-3._w5wkeh4-3-13-3:active {
+._w5wkehg-3-14-1._w5wkeh4-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkeh2-3-13-3 ._w5wkehg-3-13-3._w5wkeh4-3-13-3 {
+._w5wkeh2-3-14-1 ._w5wkehg-3-14-1._w5wkeh4-3-14-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkehg-3-13-3._w5wkeh1-3-13-3 {
+._w5wkehg-3-14-1._w5wkeh1-3-14-1 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-13-3._w5wkeh1-3-13-3:hover {
+._w5wkehg-3-14-1._w5wkeh1-3-14-1:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-13-3._w5wkeh1-3-13-3:active {
+._w5wkehg-3-14-1._w5wkeh1-3-14-1:active {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-13-3._w5wkeh4-3-13-3._w5wkeh1-3-13-3:not(._w5wkeh2-3-13-3 ._w5wkehg-3-13-3) {
+._w5wkehg-3-14-1._w5wkeh4-3-14-1._w5wkeh1-3-14-1:not(._w5wkeh2-3-14-1 ._w5wkehg-3-14-1) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jgl8s50-3-13-3 ._w5wkehg-3-13-3._w5wkeh1-3-13-3 {
-  --_w5wkeh0-3-13-3: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-14-1 ._w5wkehg-3-14-1._w5wkeh1-3-14-1 {
+  --_w5wkeh0-3-14-1: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-13-3 ._w5wkehg-3-13-3._w5wkeh1-3-13-3._w5wkeh3-3-13-3 {
-  --_w5wkeh0-3-13-3: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-14-1 ._w5wkehg-3-14-1._w5wkeh1-3-14-1._w5wkeh3-3-14-1 {
+  --_w5wkeh0-3-14-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1jgl8s50-3-13-3 ._w5wkeh2-3-13-3 ._w5wkehg-3-13-3._w5wkeh1-3-13-3 {
-  --_w5wkeh0-3-13-3: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-14-1 ._w5wkeh2-3-14-1 ._w5wkehg-3-14-1._w5wkeh1-3-14-1 {
+  --_w5wkeh0-3-14-1: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-13-3 ._w5wkeh2-3-13-3 ._w5wkehg-3-13-3._w5wkeh1-3-13-3._w5wkeh3-3-13-3 {
-  --_w5wkeh0-3-13-3: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-14-1 ._w5wkeh2-3-14-1 ._w5wkehg-3-14-1._w5wkeh1-3-14-1._w5wkeh3-3-14-1 {
+  --_w5wkeh0-3-14-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._w5wkehg-3-13-3:first-child {
+._w5wkehg-3-14-1:first-child {
   margin-left: 1px;
 }
-._w5wkehg-3-13-3:last-child {
+._w5wkehg-3-14-1:last-child {
   margin-right: 1px;
 }
-._1jgl8s50-3-13-3 ._w5wkehg-3-13-3:first-child {
+._1jgl8s50-3-14-1 ._w5wkehg-3-14-1:first-child {
   margin-left: 0;
 }
-._1jgl8s50-3-13-3 ._w5wkehg-3-13-3:last-child {
+._1jgl8s50-3-14-1 ._w5wkehg-3-14-1:last-child {
   margin-right: 0;
 }
-._w5wkehh-3-13-3 {
+._w5wkehh-3-14-1 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -203,7 +203,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehi-3-13-3 {
+._w5wkehi-3-14-1 {
   min-width: 0;
   align-items: center;
 }

package/esm/forms/toggle-button-group/styles.sty.js

@@ -1,21 +1,21 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh1-3-13-3";
-var container = "_w5wkeh7-3-13-3";
-var containerWidths = { full: "_w5wkeh9-3-13-3", content: "_w5wkeha-3-13-3" };
-var disabled = "_w5wkeh3-3-13-3";
-var disabledGroup = "_w5wkeh5-3-13-3";
-var divider = "_w5wkeh8-3-13-3";
-var error = "_w5wkeh2-3-13-3";
-var hidden = "_w5wkeh6-3-13-3";
-var item = "_w5wkehg-3-13-3";
-var readOnly = "_w5wkeh4-3-13-3";
-var scrollButton = "_w5wkehf-3-13-3";
-var scrollContainer = "_w5wkehb-3-13-3";
-var scrollVariants = { both: "_w5wkehc-3-13-3", left: "_w5wkehd-3-13-3", right: "_w5wkehe-3-13-3" };
-var text = "_w5wkehh-3-13-3";
-var textContainer = "_w5wkehi-3-13-3";
+var checked = "_w5wkeh1-3-14-1";
+var container = "_w5wkeh7-3-14-1";
+var containerWidths = { full: "_w5wkeh9-3-14-1", content: "_w5wkeha-3-14-1" };
+var disabled = "_w5wkeh3-3-14-1";
+var disabledGroup = "_w5wkeh5-3-14-1";
+var divider = "_w5wkeh8-3-14-1";
+var error = "_w5wkeh2-3-14-1";
+var hidden = "_w5wkeh6-3-14-1";
+var item = "_w5wkehg-3-14-1";
+var readOnly = "_w5wkeh4-3-14-1";
+var scrollButton = "_w5wkehf-3-14-1";
+var scrollContainer = "_w5wkehb-3-14-1";
+var scrollVariants = { both: "_w5wkehc-3-14-1", left: "_w5wkehd-3-14-1", right: "_w5wkehe-3-14-1" };
+var text = "_w5wkehh-3-14-1";
+var textContainer = "_w5wkehi-3-14-1";
 export {
   checked,
   container,

package/esm/forms/toggle-button-group/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-13-3';\nexport var container = '_w5wkeh7-3-13-3';\nexport var containerWidths = {full:'_w5wkeh9-3-13-3',content:'_w5wkeha-3-13-3'};\nexport var disabled = '_w5wkeh3-3-13-3';\nexport var disabledGroup = '_w5wkeh5-3-13-3';\nexport var divider = '_w5wkeh8-3-13-3';\nexport var error = '_w5wkeh2-3-13-3';\nexport var hidden = '_w5wkeh6-3-13-3';\nexport var item = '_w5wkehg-3-13-3';\nexport var readOnly = '_w5wkeh4-3-13-3';\nexport var scrollButton = '_w5wkehf-3-13-3';\nexport var scrollContainer = '_w5wkehb-3-13-3';\nexport var scrollVariants = {both:'_w5wkehc-3-13-3',left:'_w5wkehd-3-13-3',right:'_w5wkehe-3-13-3'};\nexport var text = '_w5wkehh-3-13-3';\nexport var textContainer = '_w5wkehi-3-13-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-14-1';\nexport var container = '_w5wkeh7-3-14-1';\nexport var containerWidths = {full:'_w5wkeh9-3-14-1',content:'_w5wkeha-3-14-1'};\nexport var disabled = '_w5wkeh3-3-14-1';\nexport var disabledGroup = '_w5wkeh5-3-14-1';\nexport var divider = '_w5wkeh8-3-14-1';\nexport var error = '_w5wkeh2-3-14-1';\nexport var hidden = '_w5wkeh6-3-14-1';\nexport var item = '_w5wkehg-3-14-1';\nexport var readOnly = '_w5wkeh4-3-14-1';\nexport var scrollButton = '_w5wkehf-3-14-1';\nexport var scrollContainer = '_w5wkehb-3-14-1';\nexport var scrollVariants = {both:'_w5wkehc-3-14-1',left:'_w5wkehd-3-14-1',right:'_w5wkehe-3-14-1'};\nexport var text = '_w5wkehh-3-14-1';\nexport var textContainer = '_w5wkehi-3-14-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,kBAAkB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;AACvE,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,OAAM,kBAAiB;AAC3F,IAAI,OAAO;AACX,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/validation/useCustomMessageEmitter.js

@@ -5,13 +5,15 @@ import {
   ValidationError
 } from "./types.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import { isInternalErrorEntry } from "../forms-core/state/formfield-messages-selectors.js";
 function useCustomMessageEmitter(emitValidationState, getBaseState) {
   const { state } = useFormFieldMessagesContext();
-  const customErrorKey = state.customMessages.filter((m) => m.variant === "error").map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ""}`).sort((a, b) => a < b ? -1 : a > b ? 1 : 0).join(",");
-  const customMessagesRef = useRef(state.customMessages);
-  customMessagesRef.current = state.customMessages;
-  const customMessageTextsRef = useRef(state.customMessageTexts);
-  customMessageTextsRef.current = state.customMessageTexts;
+  const customErrors = state.errors.filter(
+    (entry) => !isInternalErrorEntry(entry)
+  );
+  const customErrorKey = customErrors.map(({ id, error }) => `${id}:${error.message}`).sort((a, b) => a < b ? -1 : a > b ? 1 : 0).join(",");
+  const customErrorsRef = useRef(customErrors);
+  customErrorsRef.current = customErrors;
   const formControlIdRef = useRef(state.formControlId);
   formControlIdRef.current = state.formControlId;
   const messageTargetRef = useRef(state.messageTarget);
@@ -24,9 +26,6 @@ function useCustomMessageEmitter(emitValidationState, getBaseState) {
   getBaseStateRef.current = getBaseState;
   const emitWithCustomErrors = useCallback(
     (validationState) => {
-      const customErrors = customMessagesRef.current.filter(
-        (m) => m.variant === "error"
-      );
       const baseErrors = validationState.errors.filter(
         (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError)
       );
@@ -37,10 +36,10 @@ function useCustomMessageEmitter(emitValidationState, getBaseState) {
         ...validationState,
         errors: [
           ...routedBaseErrors,
-          ...customErrors.map(
-            (m) => new ValidationError(customMessageTextsRef.current?.[m.id] ?? "", {
+          ...customErrorsRef.current.map(
+            ({ error }) => error.formControlId !== void 0 ? error : new ValidationError(error.message, {
               source: "custom",
-              formControlId: m.controlId ?? baseControlId
+              formControlId: baseControlId
             })
           )
         ]

package/esm/forms/validation/useCustomMessageEmitter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/validation/useCustomMessageEmitter.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { normalizeMessageTarget, withTargetOutlet } from './message-routing.js';\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n  type ValidationState,\n} from './types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Returns a wrapped `emitValidationState` that always merges current custom\n * error messages into every emitted state. Also fires when the set of custom\n * errors changes (added or removed), using `getBaseState` to determine the\n * underlying native/Strato errors at that point.\n * @internal\n */\nexport function useCustomMessageEmitter(\n  emitValidationState: ((state: ValidationState) => void) | undefined,\n  getBaseState?: () => ValidationState | Promise<ValidationState>,\n): (state: ValidationState) => ValidationState {\n  const { state } = useFormFieldMessagesContext();\n\n  // Stable primitive dep: detects add/remove/swap by ID and message text changes.\n  const customErrorKey = state.customMessages\n    .filter((m) => m.variant === 'error')\n    .map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ''}`)\n    .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))\n    .join(',');\n\n  // Read via ref so callbacks always see current values without re-creating.\n  const customMessagesRef = useRef(state.customMessages);\n  customMessagesRef.current = state.customMessages;\n\n  const customMessageTextsRef = useRef(state.customMessageTexts);\n  customMessageTextsRef.current = state.customMessageTexts;\n\n  const formControlIdRef = useRef(state.formControlId);\n  formControlIdRef.current = state.formControlId;\n\n  const messageTargetRef = useRef(state.messageTarget);\n  messageTargetRef.current = state.messageTarget;\n\n  const isTouchedRef = useRef(state.isTouched);\n  isTouchedRef.current = state.isTouched;\n\n  const showErrorRef = useRef(state.showError);\n  showErrorRef.current = state.showError;\n\n  const getBaseStateRef = useRef(getBaseState);\n  getBaseStateRef.current = getBaseState;\n\n  // Wrapped emitter: merges current custom errors into every emitted state so\n  // that onChange/onBlur calls never silently drop an active custom error.\n  // Returns the merged state so callers (e.g. validateAsync) can return it\n  // directly instead of the raw pre-merge state.\n  const emitWithCustomErrors = useCallback(\n    (validationState: ValidationState): ValidationState => {\n      const customErrors = customMessagesRef.current.filter(\n        (m) => m.variant === 'error',\n      );\n\n      // native/customError is set via setCustomValidity and is already\n      // represented by our explicit custom entries \u2014 exclude to avoid doubling.\n      const baseErrors = validationState.errors.filter(\n        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError),\n      );\n\n      // Prefer the form control ID from native errors (already knows the right\n      // input element). Fall back to the context-registered form-control id\n      // when no native error carries one.\n      const baseControlId =\n        baseErrors.find((e) => e.formControlId !== undefined)?.formControlId ??\n        formControlIdRef.current;\n\n      // Only native/Strato messages are routable. Annotate them with the\n      // resolved outlet so the runtime can surface them in the form outlet;\n      // custom (consumer-authored) errors always place themselves at the field.\n      const targetOutlet = normalizeMessageTarget(messageTargetRef.current);\n      const routedBaseErrors =\n        targetOutlet.length === 1 && targetOutlet[0] === 'field'\n          ? baseErrors\n          : baseErrors.map((e) => withTargetOutlet(e, targetOutlet));\n\n      const merged: ValidationState = {\n        ...validationState,\n        errors: [\n          ...routedBaseErrors,\n          ...customErrors.map(\n            (m) =>\n              new ValidationError(customMessageTextsRef.current?.[m.id] ?? '', {\n                source: 'custom',\n                formControlId: m.controlId ?? baseControlId,\n              }),\n          ),\n        ],\n      };\n\n      emitValidationState?.(merged);\n      return merged;\n    },\n    [emitValidationState],\n  );\n\n  const customErrorKeyRef = useRef(customErrorKey);\n  customErrorKeyRef.current = customErrorKey;\n\n  const scheduleEmit = useCallback(() => {\n    let cancelled = false;\n    const run = async () => {\n      const baseState = (await getBaseStateRef.current?.()) ?? {\n        status: 'done' as const,\n        trigger: 'manual' as const,\n        errors: [],\n      };\n      if (cancelled) {\n        return;\n      }\n      emitWithCustomErrors(baseState);\n    };\n    void run();\n    return () => {\n      cancelled = true;\n    };\n  }, [emitWithCustomErrors]);\n\n  // Fires when the custom error set changes (add, remove, swap) so the consumer\n  // always gets an up-to-date state without a value change being required.\n  // Also fires while untouched if `showError` is already forced (e.g. a\n  // `showImmediately` error), which bypasses the touched gate for rendering\n  // and must bypass it here too so `onValidityChange` stays in sync.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      (!isTouchedRef.current && !showErrorRef.current)\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [customErrorKey, emitValidationState, scheduleEmit]);\n\n  // Fires when isTouched flips to true while custom errors are already pending,\n  // covering the case where errors were set before the field was ever blurred.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      !isTouchedRef.current ||\n      !customErrorKeyRef.current\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [state.isTouched, emitValidationState, scheduleEmit]);\n\n  return emitWithCustomErrors;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { normalizeMessageTarget, withTargetOutlet } from './message-routing.js';\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n  type ValidationState,\n} from './types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { isInternalErrorEntry } from '../forms-core/state/formfield-messages-selectors.js';\n\n/**\n * Returns a wrapped `emitValidationState` that always merges current custom\n * error messages into every emitted state. Also fires when the set of custom\n * errors changes (added or removed), using `getBaseState` to determine the\n * underlying native/Strato errors at that point.\n * @internal\n */\nexport function useCustomMessageEmitter(\n  emitValidationState: ((state: ValidationState) => void) | undefined,\n  getBaseState?: () => ValidationState | Promise<ValidationState>,\n): (state: ValidationState) => ValidationState {\n  const { state } = useFormFieldMessagesContext();\n\n  const customErrors = state.errors.filter(\n    (entry) => !isInternalErrorEntry(entry),\n  );\n\n  // Stable primitive dep: detects add/remove/swap by ID and message text changes.\n  const customErrorKey = customErrors\n    .map(({ id, error }) => `${id}:${error.message}`)\n    .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))\n    .join(',');\n\n  // Read via ref so callbacks always see current values without re-creating.\n  const customErrorsRef = useRef(customErrors);\n  customErrorsRef.current = customErrors;\n\n  const formControlIdRef = useRef(state.formControlId);\n  formControlIdRef.current = state.formControlId;\n\n  const messageTargetRef = useRef(state.messageTarget);\n  messageTargetRef.current = state.messageTarget;\n\n  const isTouchedRef = useRef(state.isTouched);\n  isTouchedRef.current = state.isTouched;\n\n  const showErrorRef = useRef(state.showError);\n  showErrorRef.current = state.showError;\n\n  const getBaseStateRef = useRef(getBaseState);\n  getBaseStateRef.current = getBaseState;\n\n  // Wrapped emitter: merges current custom errors into every emitted state so\n  // that onChange/onBlur calls never silently drop an active custom error.\n  // Returns the merged state so callers (e.g. validateAsync) can return it\n  // directly instead of the raw pre-merge state.\n  const emitWithCustomErrors = useCallback(\n    (validationState: ValidationState): ValidationState => {\n      // native/customError is set via setCustomValidity and is already\n      // represented by our explicit custom entries \u2014 exclude to avoid doubling.\n      const baseErrors = validationState.errors.filter(\n        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError),\n      );\n\n      // Prefer the form control ID from native errors (already knows the right\n      // input element). Fall back to the context-registered form-control id\n      // when no native error carries one.\n      const baseControlId =\n        baseErrors.find((e) => e.formControlId !== undefined)?.formControlId ??\n        formControlIdRef.current;\n\n      // Only native/Strato messages are routable. Annotate them with the\n      // resolved outlet so the runtime can surface them in the form outlet;\n      // custom (consumer-authored) errors always place themselves at the field.\n      const targetOutlet = normalizeMessageTarget(messageTargetRef.current);\n      const routedBaseErrors =\n        targetOutlet.length === 1 && targetOutlet[0] === 'field'\n          ? baseErrors\n          : baseErrors.map((e) => withTargetOutlet(e, targetOutlet));\n\n      const merged: ValidationState = {\n        ...validationState,\n        errors: [\n          ...routedBaseErrors,\n          ...customErrorsRef.current.map(({ error }) =>\n            error.formControlId !== undefined\n              ? error\n              : new ValidationError(error.message, {\n                  source: 'custom',\n                  formControlId: baseControlId,\n                }),\n          ),\n        ],\n      };\n\n      emitValidationState?.(merged);\n      return merged;\n    },\n    [emitValidationState],\n  );\n\n  const customErrorKeyRef = useRef(customErrorKey);\n  customErrorKeyRef.current = customErrorKey;\n\n  const scheduleEmit = useCallback(() => {\n    let cancelled = false;\n    const run = async () => {\n      const baseState = (await getBaseStateRef.current?.()) ?? {\n        status: 'done' as const,\n        trigger: 'manual' as const,\n        errors: [],\n      };\n      if (cancelled) {\n        return;\n      }\n      emitWithCustomErrors(baseState);\n    };\n    void run();\n    return () => {\n      cancelled = true;\n    };\n  }, [emitWithCustomErrors]);\n\n  // Fires when the custom error set changes (add, remove, swap) so the consumer\n  // always gets an up-to-date state without a value change being required.\n  // Also fires while untouched if `showError` is already forced (e.g. a\n  // `showImmediately` error), which bypasses the touched gate for rendering\n  // and must bypass it here too so `onValidityChange` stays in sync.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      (!isTouchedRef.current && !showErrorRef.current)\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [customErrorKey, emitValidationState, scheduleEmit]);\n\n  // Fires when isTouched flips to true while custom errors are already pending,\n  // covering the case where errors were set before the field was ever blurred.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      !isTouchedRef.current ||\n      !customErrorKeyRef.current\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [state.isTouched, emitValidationState, scheduleEmit]);\n\n  return emitWithCustomErrors;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/validation/useValidationStateEmitter.js

@@ -2,24 +2,37 @@ import { useCallback, useRef } from "react";
 import { useCallbackRef } from "../../core/hooks/useCallbackRef.js";
 function useValidationStateEmitter(onValidityChange) {
   const lastSignatureRef = useRef(void 0);
+  const lastBlurSignatureRef = useRef(void 0);
   const onValidityChangeCallback = useCallbackRef(onValidityChange);
   return useCallback(
     (state) => {
       const lastSignature = lastSignatureRef.current;
       const nextSignature = {
         errorKeys: state.errors.map((e) => e.validityStateKey.toString()).sort((a, b) => a.localeCompare(b)),
+        status: state.status,
         trigger: state.trigger
       };
       if (lastSignature === void 0 && nextSignature.trigger === "change") {
         return;
       }
-      const sameErrors = lastSignature !== void 0 && lastSignature.errorKeys.length === nextSignature.errorKeys.length && lastSignature.errorKeys.every(
+      const sameSignature = lastSignature !== void 0 && lastSignature.status === nextSignature.status && lastSignature.errorKeys.length === nextSignature.errorKeys.length && lastSignature.errorKeys.every(
         (key, i) => key === nextSignature.errorKeys[i]
       );
-      if (sameErrors && nextSignature.trigger !== "manual") {
+      const lastBlurSignature = lastBlurSignatureRef.current;
+      const blurValidityUnchanged = lastBlurSignature !== void 0 && lastBlurSignature.status === nextSignature.status && lastBlurSignature.errorKeys.length === nextSignature.errorKeys.length && lastBlurSignature.errorKeys.every(
+        (key, i) => key === nextSignature.errorKeys[i]
+      );
+      const triggerChangedToBlur = lastSignature !== void 0 && lastSignature.trigger !== "blur" && nextSignature.trigger === "blur" && !blurValidityUnchanged;
+      if (!triggerChangedToBlur && sameSignature && nextSignature.trigger !== "manual") {
         return;
       }
       lastSignatureRef.current = nextSignature;
+      if (nextSignature.trigger === "blur") {
+        lastBlurSignatureRef.current = {
+          errorKeys: nextSignature.errorKeys,
+          status: nextSignature.status
+        };
+      }
       onValidityChangeCallback(state);
     },
     [onValidityChangeCallback]

package/esm/forms/validation/useValidationStateEmitter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/validation/useValidationStateEmitter.ts"],
-  "sourcesContent": ["import { useCallback, useRef } from 'react';\n\nimport type { ValidationState } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\n\ntype ValidationStateSignature = {\n  errorKeys: string[];\n  trigger: ValidationState['trigger'];\n};\n\n/**\n * Emits validation changes only when the public validation summary changes.\n *\n * @internal\n */\nexport function useValidationStateEmitter(\n  onValidityChange: ((state: ValidationState) => void) | undefined,\n): (state: ValidationState) => void {\n  const lastSignatureRef = useRef<ValidationStateSignature>(undefined);\n  const onValidityChangeCallback = useCallbackRef(onValidityChange);\n\n  return useCallback(\n    (state: ValidationState) => {\n      const lastSignature = lastSignatureRef.current;\n\n      const nextSignature = {\n        errorKeys: state.errors\n          .map((e) => e.validityStateKey.toString())\n          .sort((a, b) => a.localeCompare(b)),\n        trigger: state.trigger,\n      };\n\n      if (lastSignature === undefined && nextSignature.trigger === 'change') {\n        return;\n      }\n\n      const sameErrors =\n        lastSignature !== undefined &&\n        lastSignature.errorKeys.length === nextSignature.errorKeys.length &&\n        lastSignature.errorKeys.every(\n          (key, i) => key === nextSignature.errorKeys[i],\n        );\n\n      if (sameErrors && nextSignature.trigger !== 'manual') {\n        return;\n      }\n\n      lastSignatureRef.current = nextSignature;\n      onValidityChangeCallback(state);\n    },\n    [onValidityChangeCallback],\n  );\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,cAAc;AAGpC,SAAS,sBAAsB;AAYxB,SAAS,0BACd,kBACkC;AAClC,QAAM,mBAAmB,OAAiC,MAAS;AACnE,QAAM,2BAA2B,eAAe,gBAAgB;AAEhE,SAAO;AAAA,IACL,CAAC,UAA2B;AAC1B,YAAM,gBAAgB,iBAAiB;AAEvC,YAAM,gBAAgB;AAAA,QACpB,WAAW,MAAM,OACd,IAAI,CAAC,MAAM,EAAE,iBAAiB,SAAS,CAAC,EACxC,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AAAA,QACpC,SAAS,MAAM;AAAA,MACjB;AAEA,UAAI,kBAAkB,UAAa,cAAc,YAAY,UAAU;AACrE;AAAA,MACF;AAEA,YAAM,aACJ,kBAAkB,UAClB,cAAc,UAAU,WAAW,cAAc,UAAU,UAC3D,cAAc,UAAU;AAAA,QACtB,CAAC,KAAK,MAAM,QAAQ,cAAc,UAAU,CAAC;AAAA,MAC/C;AAEF,UAAI,cAAc,cAAc,YAAY,UAAU;AACpD;AAAA,MACF;AAEA,uBAAiB,UAAU;AAC3B,+BAAyB,KAAK;AAAA,IAChC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACF;",
+  "sourcesContent": ["import { useCallback, useRef } from 'react';\n\nimport type { ValidationState } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\n\ntype ValidationStateSignature = {\n  errorKeys: string[];\n  status: ValidationState['status'];\n  trigger: ValidationState['trigger'];\n};\n\n/**\n * Emits validation changes only when the public validation summary changes.\n *\n * @internal\n */\nexport function useValidationStateEmitter(\n  onValidityChange: ((state: ValidationState) => void) | undefined,\n): (state: ValidationState) => void {\n  const lastSignatureRef = useRef<ValidationStateSignature>(undefined);\n  const lastBlurSignatureRef = useRef<{\n    errorKeys: string[];\n    status: ValidationState['status'];\n  }>(undefined);\n  const onValidityChangeCallback = useCallbackRef(onValidityChange);\n\n  return useCallback(\n    (state: ValidationState) => {\n      const lastSignature = lastSignatureRef.current;\n\n      const nextSignature = {\n        errorKeys: state.errors\n          .map((e) => e.validityStateKey.toString())\n          .sort((a, b) => a.localeCompare(b)),\n        status: state.status,\n        trigger: state.trigger,\n      };\n\n      if (lastSignature === undefined && nextSignature.trigger === 'change') {\n        return;\n      }\n\n      // Suppress duplicate emissions: same status AND same error keys.\n      const sameSignature =\n        lastSignature !== undefined &&\n        lastSignature.status === nextSignature.status &&\n        lastSignature.errorKeys.length === nextSignature.errorKeys.length &&\n        lastSignature.errorKeys.every(\n          (key, i) => key === nextSignature.errorKeys[i],\n        );\n\n      // A transition TO 'blur' fires when the validity (errors + status) has\n      // changed since the last blur \u2014 consumers use trigger:'blur' to mark a\n      // field as touched, but re-firing with the same validity on every blur\n      // is redundant noise. The reverse (blur \u2192 change with same state) is\n      // suppressed because the linter re-confirming the same result after a\n      // blur is redundant.\n      const lastBlurSignature = lastBlurSignatureRef.current;\n      const blurValidityUnchanged =\n        lastBlurSignature !== undefined &&\n        lastBlurSignature.status === nextSignature.status &&\n        lastBlurSignature.errorKeys.length === nextSignature.errorKeys.length &&\n        lastBlurSignature.errorKeys.every(\n          (key, i) => key === nextSignature.errorKeys[i],\n        );\n      const triggerChangedToBlur =\n        lastSignature !== undefined &&\n        lastSignature.trigger !== 'blur' &&\n        nextSignature.trigger === 'blur' &&\n        !blurValidityUnchanged;\n\n      if (\n        !triggerChangedToBlur &&\n        sameSignature &&\n        nextSignature.trigger !== 'manual'\n      ) {\n        return;\n      }\n\n      lastSignatureRef.current = nextSignature;\n      if (nextSignature.trigger === 'blur') {\n        lastBlurSignatureRef.current = {\n          errorKeys: nextSignature.errorKeys,\n          status: nextSignature.status,\n        };\n      }\n      onValidityChangeCallback(state);\n    },\n    [onValidityChangeCallback],\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,cAAc;AAGpC,SAAS,sBAAsB;AAaxB,SAAS,0BACd,kBACkC;AAClC,QAAM,mBAAmB,OAAiC,MAAS;AACnE,QAAM,uBAAuB,OAG1B,MAAS;AACZ,QAAM,2BAA2B,eAAe,gBAAgB;AAEhE,SAAO;AAAA,IACL,CAAC,UAA2B;AAC1B,YAAM,gBAAgB,iBAAiB;AAEvC,YAAM,gBAAgB;AAAA,QACpB,WAAW,MAAM,OACd,IAAI,CAAC,MAAM,EAAE,iBAAiB,SAAS,CAAC,EACxC,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AAAA,QACpC,QAAQ,MAAM;AAAA,QACd,SAAS,MAAM;AAAA,MACjB;AAEA,UAAI,kBAAkB,UAAa,cAAc,YAAY,UAAU;AACrE;AAAA,MACF;AAGA,YAAM,gBACJ,kBAAkB,UAClB,cAAc,WAAW,cAAc,UACvC,cAAc,UAAU,WAAW,cAAc,UAAU,UAC3D,cAAc,UAAU;AAAA,QACtB,CAAC,KAAK,MAAM,QAAQ,cAAc,UAAU,CAAC;AAAA,MAC/C;AAQF,YAAM,oBAAoB,qBAAqB;AAC/C,YAAM,wBACJ,sBAAsB,UACtB,kBAAkB,WAAW,cAAc,UAC3C,kBAAkB,UAAU,WAAW,cAAc,UAAU,UAC/D,kBAAkB,UAAU;AAAA,QAC1B,CAAC,KAAK,MAAM,QAAQ,cAAc,UAAU,CAAC;AAAA,MAC/C;AACF,YAAM,uBACJ,kBAAkB,UAClB,cAAc,YAAY,UAC1B,cAAc,YAAY,UAC1B,CAAC;AAEH,UACE,CAAC,wBACD,iBACA,cAAc,YAAY,UAC1B;AACA;AAAA,MACF;AAEA,uBAAiB,UAAU;AAC3B,UAAI,cAAc,YAAY,QAAQ;AACpC,6BAAqB,UAAU;AAAA,UAC7B,WAAW,cAAc;AAAA,UACzB,QAAQ,cAAc;AAAA,QACxB;AAAA,MACF;AACA,+BAAyB,KAAK;AAAA,IAChC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACF;",
   "names": []
 }

package/esm/forms/validation/validation-builders.js

@@ -17,6 +17,16 @@ function getValidityStateKeySource(validityStateKey) {
   }
   return "custom";
 }
+function withSource(error, source) {
+  if (error.source === source) {
+    return error;
+  }
+  const copy = Object.create(Object.getPrototypeOf(error));
+  Object.assign(copy, error);
+  copy.message = error.message;
+  copy.stack = error.stack;
+  return Object.assign(copy, { source });
+}
 function getValidationState(input, trigger, message, formControlId) {
   if (!input) {
     return { status: "done", trigger, errors: [] };
@@ -52,6 +62,7 @@ function getValidationState(input, trigger, message, formControlId) {
   return { status: "done", trigger, errors };
 }
 export {
-  getValidationState
+  getValidationState,
+  withSource
 };
 //# sourceMappingURL=validation-builders.js.map