@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/forms/toggle-button-group/Item.js

@@ -24,6 +24,7 @@ import { Text } from "../../typography/text/Text.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { getValidationState } from "../validation/validation-builders.js";
 const Item = forwardRef(
   (props, forwardedRef) => {
     const fallbackId = useId();
@@ -52,7 +53,8 @@ const Item = forwardRef(
       ariaDisabled,
       selectedValue,
       isReadOnly: isReadOnlyContext,
-      onChange
+      onChange,
+      onValidityChange
     } = useToggleButtonGroupContext();
     const labelRef = useRef(null);
     const inputRef = useRef(null);
@@ -66,7 +68,13 @@ const Item = forwardRef(
       onInvalid: validationOnInvalid,
       onBlur: validationOnBlur,
       ariaProps
-    } = useFormFieldValidation(inputRef, { isRequired });
+    } = useFormFieldValidation(
+      inputRef,
+      { isRequired, selectedValue: selectedValue ?? void 0 },
+      void 0,
+      id,
+      onValidityChange
+    );
     useEffect(() => {
       messagesContextDispatch?.({
         type: FormFieldMessagesAction.ADDFORMCONTROLID,
@@ -90,6 +98,11 @@ const Item = forwardRef(
         },
         validate() {
           inputRef.current?.checkValidity();
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          inputRef.current?.checkValidity();
+          return getValidationState(inputRef.current, "manual");
         }
       };
     });
@@ -126,8 +139,9 @@ const Item = forwardRef(
           onChange?.(value, e);
         }
         validationOnChange?.();
+        onValidityChange?.(getValidationState(inputRef.current, "change"));
       },
-      [isReadOnly, value, onChange, validationOnChange]
+      [isReadOnly, value, onChange, validationOnChange, onValidityChange]
     );
     useEffect(() => {
       if (checked && labelRef.current) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/Item.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useToggleButtonGroupContext } from './hooks/useToggleButtonGroupContext.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.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 { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n//#region Typings\n/**\n * Accepted properties for the ToggleButtonGroup Item.\n * @public\n */\nexport type ToggleButtonGroupItemProps = FormControlProps<string, never> &\n  PropsWithChildren &\n  DOMProps &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /** When a tooltip is provided, text is shown on hover. */\n    tooltip?: string;\n\n    /**\n     * Zero or more items in a group can be checked.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    checked?: boolean;\n\n    /**\n     * Indicates if the mover is currently over the item.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    hovered?: boolean;\n  };\n//#endregion\n\n/**\n * ToggleButtonGroup Item component.\n * @public\n */\nexport const Item = forwardRef<FormControlRef, ToggleButtonGroupItemProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      id = fallbackId,\n      disabled: propDisabled,\n      readOnly: propReadOnly,\n      tooltip,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      value,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Toggle',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const {\n      name,\n      isRequired,\n      hasError,\n      isDisabled: disabledContext,\n      ariaDisabled,\n      selectedValue,\n      isReadOnly: isReadOnlyContext,\n      onChange,\n    } = useToggleButtonGroupContext();\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isDisabled = disabledContext || propDisabled;\n    const isReadOnly = isReadOnlyContext || propReadOnly;\n    const checked = selectedValue === value;\n\n    const color = hasError ? 'critical' : 'neutral';\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      onBlur: validationOnBlur,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { isRequired });\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const [slots, freeform] = useSlots(children, {\n      prefix: Prefix,\n      suffix: Suffix,\n    });\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: labelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n        },\n      };\n    });\n\n    const scrollTabIntoView = useCallback(\n      (behavior: 'smooth' | 'instant') => {\n        if (!checked || !labelRef.current) {\n          return;\n        }\n\n        const parent = labelRef.current.parentElement;\n        if (!parent) {\n          return;\n        }\n\n        const parentRect = parent.getBoundingClientRect();\n        const targetRect = labelRef.current.getBoundingClientRect();\n\n        const currentLeft = parent.scrollLeft;\n        const deltaLeft = targetRect.left - parentRect.left;\n        const deltaRight = targetRect.right - parentRect.right;\n\n        let nextLeft = currentLeft;\n        if (deltaLeft < 0) {\n          nextLeft += deltaLeft;\n        } else if (deltaRight > 0) {\n          nextLeft += deltaRight;\n        }\n\n        parent.scrollTo?.({ left: nextLeft, behavior: behavior });\n      },\n      [checked],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (isReadOnly) {\n          return;\n        }\n\n        if (value !== undefined) {\n          onChange?.(value, e);\n        }\n\n        validationOnChange?.();\n      },\n      [isReadOnly, value, onChange, validationOnChange],\n    );\n\n    useEffect(() => {\n      if (checked && labelRef.current) {\n        scrollTabIntoView('instant');\n      }\n      // Instantly scrolls to the checked item only on the first render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const parent = labelRef.current?.parentElement;\n      if (!parent) {\n        return;\n      }\n\n      let prevWidth = parent.offsetWidth;\n      let debounceTimer: number | undefined;\n\n      const resizeObserver = new window.ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target === parent && parent.offsetWidth !== prevWidth) {\n            prevWidth = parent.offsetWidth;\n            window.clearTimeout(debounceTimer);\n            debounceTimer = window.setTimeout(() => {\n              scrollTabIntoView('smooth');\n            }, 300);\n          }\n        }\n      });\n      resizeObserver.observe(parent);\n\n      scrollTabIntoView('smooth');\n\n      return () => {\n        resizeObserver.disconnect();\n        window.clearTimeout(debounceTimer);\n      };\n    }, [checked, scrollTabIntoView]);\n\n    if (isDev() && tooltip === undefined && freeform.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'A text to indicate the value is required. It can be provided by a tooltip.',\n      );\n    }\n\n    const toggleItem = (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={labelRef}\n        className={clsx(\n          styles.item,\n          {\n            [styles.checked]: checked,\n            [styles.disabled]: isDisabled || ariaDisabled,\n            [styles.readOnly]: isReadOnly,\n          },\n          focusRingStatic({\n            when: 'focus-within-visible',\n            disabled: isDisabled || ariaDisabled,\n            color: color,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-dt-name={dataDtName}\n        {...remainingBehavioralTrackingProps}\n        {...restProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={id}\n            type=\"radio\"\n            ref={inputRef}\n            name={name}\n            value={value}\n            disabled={isDisabled}\n            aria-disabled={ariaDisabled}\n            readOnly={isReadOnly}\n            aria-label={tooltip}\n            checked={checked}\n            onChange={handleChange}\n            required={isRequired}\n            onInvalid={validationOnInvalid}\n            {..._mergeProps(restProps, {\n              ...ariaProps,\n              onBlur: validationOnBlur,\n            })}\n          />\n        </VisuallyHidden>\n\n        {slots.prefix}\n        {freeform.length > 0 && (\n          <Flex flexDirection=\"column\" gap={0} className={styles.textContainer}>\n            <Text\n              as=\"span\"\n              textStyle={checked ? 'base-emphasized' : 'base'}\n              className={styles.text}\n            >\n              {freeform}\n            </Text>\n            {/** Visually hidden text to prevent layout shift when the item is checked and the text becomes emphasized */}\n            <Text\n              as=\"span\"\n              textStyle=\"base-emphasized\"\n              className={clsx(styles.hidden, styles.text)}\n              aria-hidden\n            >\n              {freeform}\n            </Text>\n          </Flex>\n        )}\n        {slots.suffix}\n      </label>\n    );\n\n    return tooltip ? (\n      <Tooltip text={tooltip}>{toggleItem}</Tooltip>\n    ) : (\n      toggleItem\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName =\n  'ToggleButtonGroup.Item';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useToggleButtonGroupContext } from './hooks/useToggleButtonGroupContext.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.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 { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\n//#region Typings\n/**\n * Accepted properties for the ToggleButtonGroup Item.\n * @public\n */\nexport type ToggleButtonGroupItemProps = FormControlProps<string, never> &\n  PropsWithChildren &\n  DOMProps &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /** When a tooltip is provided, text is shown on hover. */\n    tooltip?: string;\n\n    /**\n     * Zero or more items in a group can be checked.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    checked?: boolean;\n\n    /**\n     * Indicates if the mover is currently over the item.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    hovered?: boolean;\n  };\n//#endregion\n\n/**\n * ToggleButtonGroup Item component.\n * @public\n */\nexport const Item = forwardRef<FormControlRef, ToggleButtonGroupItemProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      id = fallbackId,\n      disabled: propDisabled,\n      readOnly: propReadOnly,\n      tooltip,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      value,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Toggle',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const {\n      name,\n      isRequired,\n      hasError,\n      isDisabled: disabledContext,\n      ariaDisabled,\n      selectedValue,\n      isReadOnly: isReadOnlyContext,\n      onChange,\n      onValidityChange,\n    } = useToggleButtonGroupContext();\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isDisabled = disabledContext || propDisabled;\n    const isReadOnly = isReadOnlyContext || propReadOnly;\n    const checked = selectedValue === value;\n\n    const color = hasError ? 'critical' : 'neutral';\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      onBlur: validationOnBlur,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { isRequired, selectedValue: selectedValue ?? undefined },\n      undefined,\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const [slots, freeform] = useSlots(children, {\n      prefix: Prefix,\n      suffix: Suffix,\n    });\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: labelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const scrollTabIntoView = useCallback(\n      (behavior: 'smooth' | 'instant') => {\n        if (!checked || !labelRef.current) {\n          return;\n        }\n\n        const parent = labelRef.current.parentElement;\n        if (!parent) {\n          return;\n        }\n\n        const parentRect = parent.getBoundingClientRect();\n        const targetRect = labelRef.current.getBoundingClientRect();\n\n        const currentLeft = parent.scrollLeft;\n        const deltaLeft = targetRect.left - parentRect.left;\n        const deltaRight = targetRect.right - parentRect.right;\n\n        let nextLeft = currentLeft;\n        if (deltaLeft < 0) {\n          nextLeft += deltaLeft;\n        } else if (deltaRight > 0) {\n          nextLeft += deltaRight;\n        }\n\n        parent.scrollTo?.({ left: nextLeft, behavior: behavior });\n      },\n      [checked],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (isReadOnly) {\n          return;\n        }\n\n        if (value !== undefined) {\n          onChange?.(value, e);\n        }\n\n        validationOnChange?.();\n        onValidityChange?.(getValidationState(inputRef.current, 'change'));\n      },\n      [isReadOnly, value, onChange, validationOnChange, onValidityChange],\n    );\n\n    useEffect(() => {\n      if (checked && labelRef.current) {\n        scrollTabIntoView('instant');\n      }\n      // Instantly scrolls to the checked item only on the first render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const parent = labelRef.current?.parentElement;\n      if (!parent) {\n        return;\n      }\n\n      let prevWidth = parent.offsetWidth;\n      let debounceTimer: number | undefined;\n\n      const resizeObserver = new window.ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target === parent && parent.offsetWidth !== prevWidth) {\n            prevWidth = parent.offsetWidth;\n            window.clearTimeout(debounceTimer);\n            debounceTimer = window.setTimeout(() => {\n              scrollTabIntoView('smooth');\n            }, 300);\n          }\n        }\n      });\n      resizeObserver.observe(parent);\n\n      scrollTabIntoView('smooth');\n\n      return () => {\n        resizeObserver.disconnect();\n        window.clearTimeout(debounceTimer);\n      };\n    }, [checked, scrollTabIntoView]);\n\n    if (isDev() && tooltip === undefined && freeform.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'A text to indicate the value is required. It can be provided by a tooltip.',\n      );\n    }\n\n    const toggleItem = (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={labelRef}\n        className={clsx(\n          styles.item,\n          {\n            [styles.checked]: checked,\n            [styles.disabled]: isDisabled || ariaDisabled,\n            [styles.readOnly]: isReadOnly,\n          },\n          focusRingStatic({\n            when: 'focus-within-visible',\n            disabled: isDisabled || ariaDisabled,\n            color: color,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-dt-name={dataDtName}\n        {...remainingBehavioralTrackingProps}\n        {...restProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={id}\n            type=\"radio\"\n            ref={inputRef}\n            name={name}\n            value={value}\n            disabled={isDisabled}\n            aria-disabled={ariaDisabled}\n            readOnly={isReadOnly}\n            aria-label={tooltip}\n            checked={checked}\n            onChange={handleChange}\n            required={isRequired}\n            onInvalid={validationOnInvalid}\n            {..._mergeProps(restProps, {\n              ...ariaProps,\n              onBlur: validationOnBlur,\n            })}\n          />\n        </VisuallyHidden>\n\n        {slots.prefix}\n        {freeform.length > 0 && (\n          <Flex flexDirection=\"column\" gap={0} className={styles.textContainer}>\n            <Text\n              as=\"span\"\n              textStyle={checked ? 'base-emphasized' : 'base'}\n              className={styles.text}\n            >\n              {freeform}\n            </Text>\n            {/** Visually hidden text to prevent layout shift when the item is checked and the text becomes emphasized */}\n            <Text\n              as=\"span\"\n              textStyle=\"base-emphasized\"\n              className={clsx(styles.hidden, styles.text)}\n              aria-hidden\n            >\n              {freeform}\n            </Text>\n          </Flex>\n        )}\n        {slots.suffix}\n      </label>\n    );\n\n    return tooltip ? (\n      <Tooltip text={tooltip}>{toggleItem}</Tooltip>\n    ) : (\n      toggleItem\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName =\n  'ToggleButtonGroup.Item';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -10,6 +10,7 @@ import {
   useRef,
   useState
 } from "react";
+import { useIntl } from "react-intl";
 import { ChevronLeftIcon, ChevronRightIcon } from "@dynatrace/strato-icons";
 import { ToggleButtonGroupContext } from "./contexts/ToggleButtonGroupContext.js";
 import { Item } from "./Item.js";
@@ -21,12 +22,15 @@ import { useContainerSize } from "../../core/hooks/useContainerSize.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
-import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
+import { useVisualRefreshEnabled } from "../../core/hooks/useVisualRefreshEnabled.js";
 import { Divider } from "../../layouts/divider/Divider.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import { getI18nValidationState } from "../forms-core/hooks/useFormFieldValidation.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 const COMPONENT_NAME = "ToggleButtonGroup";
 const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
   const fallbackName = useId();
@@ -41,6 +45,7 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
     name = fallbackName,
     width = "content",
     onChange,
+    onValidityChange,
     className: consumerClassName,
     style: consumerStyle,
     "aria-disabled": propAriaDisabled,
@@ -48,8 +53,18 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-mask": dataDtrumMask,
     ...remainingProps
   } = props;
+  const intl = useIntl();
   const wrapperRef = useRef(null);
   const containerRef = useRef(null);
+  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => getI18nValidationState(
+      intl,
+      wrapperRef.current?.querySelector("input"),
+      "manual"
+    )
+  );
   const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);
   const [isOverflowingRight, setIsOverflowingRight] = useState(false);
   const {
@@ -85,12 +100,31 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
           (checkedInput ?? wrapperRef.current?.querySelector("input"))?.focus();
         },
         validate() {
-          const inputs = wrapperRef.current?.querySelectorAll("input");
-          inputs?.forEach((input) => input?.checkValidity());
+          wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
+          messagesContextDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          const firstInput = wrapperRef.current?.querySelector(
+            "input"
+          );
+          emitValidationState(
+            getI18nValidationState(intl, firstInput, "manual")
+          );
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
           messagesContextDispatch?.({
             type: FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+          const firstInput = wrapperRef.current?.querySelector(
+            "input"
+          );
+          return emitValidationState(
+            getI18nValidationState(intl, firstInput, "manual")
+          );
         }
       };
       if (!wrapperRef.current) {
@@ -105,7 +139,7 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
         }
       });
     },
-    [messagesContextDispatch]
+    [messagesContextDispatch, emitValidationState]
   );
   const handleChange = useCallback(
     (value2, event) => {
@@ -129,7 +163,8 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
       isRequired,
       hasError,
       selectedValue,
-      onChange: handleChange
+      onChange: handleChange,
+      onValidityChange: emitValidationState
     }),
     [
       name,
@@ -139,10 +174,11 @@ const ToggleButtonGroupRoot = forwardRef((props, forwardedRef) => {
       isRequired,
       hasError,
       selectedValue,
-      handleChange
+      handleChange,
+      emitValidationState
     ]
   );
-  const scrollButtonVariant = isVisualRefreshEnabled() ? "default" : "emphasized";
+  const scrollButtonVariant = useVisualRefreshEnabled() ? "default" : "emphasized";
   const color = hasError && !isDisabledOrAriaDisabled ? "critical" : "neutral";
   const { width: containerWidth } = useContainerSize(containerRef);
   const updateOverflow = useCallback(() => {

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 FormEvent,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\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 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 { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.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  (value: string, event?: FormEvent<HTMLElement | SVGElement>) => void | never\n> &\n  PropsWithChildren &\n  DOMProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps & {\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    width = 'content',\n    onChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'aria-disabled': propAriaDisabled,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    ...remainingProps\n  }: ToggleButtonGroupProps = props;\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n  const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n  const {\n    disabled: formControlDisabled,\n    ariaDisabled,\n    required: isRequired,\n    id: formControlId,\n    readOnly: isReadOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\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 { dispatch: messagesContextDispatch, state: messageContextState } =\n    useFormFieldMessagesContext();\n\n  const hasError = messageContextState.showError;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> | HTMLDivElement | null => {\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          const inputs = wrapperRef.current?.querySelectorAll('input');\n          inputs?.forEach((input) => input?.checkValidity());\n\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\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        >(target: HTMLDivElement, property: Property) {\n          if (property in newRef) {\n            return newRef[property];\n          }\n          return target[property];\n        },\n      });\n    },\n    [messagesContextDispatch],\n  );\n\n  const handleChange = useCallback(\n    (value: string, event?: FormEvent<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      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      onChange: handleChange,\n    }),\n    [\n      name,\n      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      handleChange,\n    ],\n  );\n\n  const scrollButtonVariant = isVisualRefreshEnabled()\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  return (\n    <div\n      className={clsx(\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-disabled={ariaDisabled}\n      id={formControlId}\n      ref={wrapperRef}\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                  />\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": "AAkRY,cA4BE,YA5BF;AAlRZ,OAAO,UAAU;AAEjB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,wBAAwB;AAElD,SAAS,gCAAgC;AACzC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAOzB,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AAGxC,MAAM,iBAAiB;AAyBvB,MAAM,wBAAwB,WAG5B,CAAC,OAAO,iBAAiB;AACzB,QAAM,eAAe,MAAM;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAA4B;AAC5B,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAElE,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,IAAI,0BAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,gBAAgB;AACnC,QAAM,2BAA2B,cAAc;AAE/C,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,yBAAyB,OAAO,oBAAoB,IACpE,4BAA4B;AAE9B,QAAM,WAAW,oBAAoB;AAErC;AAAA,IACE;AAAA,IACA,MAA8D;AAC5D,YAAM,SAAS;AAAA,QACb,SAAS,WAAW;AAAA,QACpB,QAAQ;AACN,gBAAM,eAAe,WAAW,SAAS;AAAA,YACvC;AAAA,UACF;AACA,WACE,gBACC,WAAW,SAAS,cAAc,OAAO,IACzC,MAAM;AAAA,QACX;AAAA,QACA,WAAW;AACT,gBAAM,SAAS,WAAW,SAAS,iBAAiB,OAAO;AAC3D,kBAAQ,QAAQ,CAAC,UAAU,OAAO,cAAc,CAAC;AAEjD,oCAA0B;AAAA,YACxB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,MACF;AAEA,UAAI,CAAC,WAAW,SAAS;AACvB,eAAO;AAAA,MACT;AAEA,aAAO,IAAI,MAAsB,WAAW,SAAS;AAAA,QACnD,KAAK,SAKH,QAAwB,UAAoB;AAC5C,cAAI,YAAY,QAAQ;AACtB,mBAAO,OAAO,QAAQ;AAAA,UACxB;AACA,iBAAO,OAAO,QAAQ;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,QAAM,eAAe;AAAA,IACnB,CAACA,QAAe,UAAgD;AAC9D,yBAAmBA,MAAK;AACxB,iBAAWA,QAAO,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,UAAU,gBAAgB;AAAA,EAC7B;AAEA,QAAM,cACJ,UAAU,aAAa,UAAU,SAAS,QAAQ;AAEpD,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,OAAO,EAAE,OAAO,MAAM,UAAU,KAAK;AAAA,IACrC,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,sBAAsB,uBAAuB,IAC/C,YACA;AAEJ,QAAM,QAAQ,YAAY,CAAC,2BAA2B,aAAa;AAEnE,QAAM,EAAE,OAAO,eAAe,IAAI,iBAAiB,YAAY;AAE/D,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,aAAa,SAAS;AACxB,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,aAAa;AAC9D,YAAM,YAAY;AAClB,2BAAqB,aAAa,SAAS;AAC3C,4BAAsB,aAAa,cAAc,cAAc,SAAS;AAAA,IAC1E;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,CAAC,aAA2B;AAC5C,UAAM,YAAY,aAAa;AAC/B,QAAI,WAAW;AACb,gBAAU,SAAS;AAAA,QACjB,MAAO,WAAW,UAAU,cAAe;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP;AAAA,UACE,CAAC,OAAO,aAAa,GAAG;AAAA,UACxB,CAAC,OAAO,KAAK,GAAG;AAAA,UAChB,CAAC,OAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,OAAO,gBAAgB,OAAO,GAAG,UAAU;AAAA,UAC5C,CAAC,OAAO,gBAAgB,IAAI,GAAG,UAAU;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,UAAU,aAAa,GAAG,cAAc;AAAA,MACjD,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,oBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA,6BACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO,EAAE,MAAM,OAAO,UAAU,YAAY,KAAK,MAAM;AAAA,YACvD,SAAS;AAAA,YACT;AAAA,YACA,SAAS,MAAM,UAAU,EAAE;AAAA,YAC3B,MAAK;AAAA,YAEL,8BAAC,OAAO,QAAP,EACC,8BAAC,mBAAgB,GACnB;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,UAAU;AAAA,YACV,WAAW,KAAK,OAAO,iBAAiB;AAAA,cACtC,CAAC,OAAO,eAAe,IAAI,GACzB,qBAAqB,CAAC;AAAA,cACxB,CAAC,OAAO,eAAe,KAAK,GAC1B,CAAC,qBAAqB;AAAA,cACxB,CAAC,OAAO,eAAe,IAAI,GAAG,qBAAqB;AAAA,YACrD,CAAC;AAAA,YAED,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,YACvC,gBAAM,OAAO,IAAI,CAAC,MAAM,UAAU;AACjC,oBAAM,QAAQ,MAAM,SAAS,CAAC;AAC9B,oBAAMA,SAAQ,KAAK,MAAM;AAEzB,oBAAM,aAAaA,WAAU;AAC7B,oBAAM,SAAS,UAAU,MAAM,SAAS;AACxC,oBAAM,WAAW,MAAM,QAAQ,CAAC;AAChC,oBAAM,gBAAgB,UAAU,OAAO;AAEvC,oBAAM,iBAAiB,kBAAkB;AACzC,qBACE,qBAAC,YACE;AAAA;AAAA,gBACA,CAAC,UACA;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAY;AAAA,oBACZ,WAAW,KAAK,OAAO,SAAS;AAAA,sBAC9B,CAAC,OAAO,MAAM,GAAG,cAAc;AAAA,oBACjC,CAAC;AAAA;AAAA,gBACH;AAAA,mBARW,KAAK,MAAM,SAAS,KAAK,MAAM,MAAM,KAUpD;AAAA,YAEJ,CAAC,GACH;AAAA;AAAA,QACF;AAAA,QACC,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO,EAAE,OAAO,OAAO,UAAU,YAAY,KAAK,OAAO;AAAA,YACzD,SAAS;AAAA,YACT;AAAA,YACA,SAAS,MAAM,UAAU,CAAC;AAAA,YAC1B,MAAK;AAAA,YAEL,8BAAC,OAAO,QAAP,EACC,8BAAC,oBAAiB,GACpB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAMM,MAAM,oBAAoB,OAAO,OAAO,uBAAuB;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  type FormEvent,\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 { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-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  (value: string, event?: FormEvent<HTMLElement | SVGElement>) => void | never\n> &\n  PropsWithChildren &\n  DOMProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps & {\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    width = 'content',\n    onChange,\n    onValidityChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'aria-disabled': propAriaDisabled,\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 _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n  const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n  const {\n    disabled: formControlDisabled,\n    ariaDisabled,\n    required: isRequired,\n    id: formControlId,\n    readOnly: isReadOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\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 { dispatch: messagesContextDispatch, state: messageContextState } =\n    useFormFieldMessagesContext();\n\n  const hasError = messageContextState.showError;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> | HTMLDivElement | null => {\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?: FormEvent<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      isDisabled,\n      ariaDisabled,\n      isReadOnly,\n      isRequired,\n      hasError,\n      selectedValue,\n      onChange: handleChange,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\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  return (\n    <div\n      className={clsx(\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-disabled={ariaDisabled}\n      id={formControlId}\n      ref={wrapperRef}\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                  />\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/contexts/ToggleButtonGroupContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/toggle-button-group/contexts/ToggleButtonGroupContext.ts"],
-  "sourcesContent": ["import { type FormEvent, type Context, createContext } from 'react';\n\n/** @internal */\nexport type ToggleButtonGroupContextType = {\n  /** The name of the ToggleButtonGroup. */\n  name?: string;\n  /**\n   * Whether the ToggleButtonGroup is required.\n   * @defaultValue false\n   * */\n  isRequired?: boolean;\n  /** Whether the ToggleButtonGroup is invalid. */\n  hasError?: boolean;\n  /** Whether the ToggleButtonGroup is disabled. */\n  isDisabled?: boolean;\n  /** Whether the ToggleButtonGroup is read-only. */\n  isReadOnly?: boolean;\n  /** Whether the ToggleButtonGroup is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** The selected value of the ToggleButtonGroup. */\n  selectedValue?: string | null;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (\n    value: string,\n    event?: FormEvent<HTMLElement | SVGElement>,\n  ) => void;\n};\n\n/**\n * Context to hold the state of the ToggleButtonGroup\n * @internal\n */\nexport const ToggleButtonGroupContext: Context<ToggleButtonGroupContextType> =\n  createContext<ToggleButtonGroupContextType>({});\n"],
-  "mappings": "AAAA,SAAuC,qBAAqB;AAgCrD,MAAM,2BACX,cAA4C,CAAC,CAAC;",
+  "sourcesContent": ["import { type FormEvent, type Context, createContext } from 'react';\n\nimport type { ValidationState } from '../../validation/types.js';\n\n/** @internal */\nexport type ToggleButtonGroupContextType = {\n  /** The name of the ToggleButtonGroup. */\n  name?: string;\n  /**\n   * Whether the ToggleButtonGroup is required.\n   * @defaultValue false\n   * */\n  isRequired?: boolean;\n  /** Whether the ToggleButtonGroup is invalid. */\n  hasError?: boolean;\n  /** Whether the ToggleButtonGroup is disabled. */\n  isDisabled?: boolean;\n  /** Whether the ToggleButtonGroup is read-only. */\n  isReadOnly?: boolean;\n  /** Whether the ToggleButtonGroup is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** The selected value of the ToggleButtonGroup. */\n  selectedValue?: string | null;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (\n    value: string,\n    event?: FormEvent<HTMLElement | SVGElement>,\n  ) => void;\n  /** Called whenever the group's validation state changes due to a user interaction. */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/**\n * Context to hold the state of the ToggleButtonGroup\n * @internal\n */\nexport const ToggleButtonGroupContext: Context<ToggleButtonGroupContextType> =\n  createContext<ToggleButtonGroupContextType>({});\n"],
+  "mappings": "AAAA,SAAuC,qBAAqB;AAoCrD,MAAM,2BACX,cAA4C,CAAC,CAAC;",
   "names": []
 }

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

@@ -1,14 +1,14 @@
-._w5wkeh1-3-7-1 {
-  --_w5wkeh0-3-7-1: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh5-3-7-1:not(._w5wkeh4-3-7-1) {
+._w5wkeh5-3-8-0:not(._w5wkeh4-3-8-0) {
   cursor: not-allowed;
 }
-._w5wkeh6-3-7-1 {
+._w5wkeh6-3-8-0 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh7-3-7-1 {
+._w5wkeh7-3-8-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -23,40 +23,40 @@
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._1jgl8s50-3-7-1 ._w5wkeh7-3-7-1 {
+._1jgl8s50-3-8-0 ._w5wkeh7-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
 }
-._w5wkeh7-3-7-1._w5wkeh2-3-7-1 {
+._w5wkeh7-3-8-0._w5wkeh2-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-7-1._w5wkeh5-3-7-1 {
+._w5wkeh7-3-8-0._w5wkeh5-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkeh7-3-7-1._w5wkeh4-3-7-1 {
+._w5wkeh7-3-8-0._w5wkeh4-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh7-3-7-1._w5wkeh4-3-7-1._w5wkeh2-3-7-1 {
+._w5wkeh7-3-8-0._w5wkeh4-3-8-0._w5wkeh2-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh8-3-7-1 {
+._w5wkeh8-3-8-0 {
   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-7-1:not(._w5wkeh5-3-7-1) ._w5wkeh8-3-7-1 {
+._w5wkeh2-3-8-0:not(._w5wkeh5-3-8-0) ._w5wkeh8-3-8-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh9-3-7-1 {
+._w5wkeh9-3-8-0 {
   width: 100%;
 }
-._w5wkeha-3-7-1 {
+._w5wkeha-3-8-0 {
   width: fit-content;
 }
-._w5wkehb-3-7-1 {
+._w5wkehb-3-8-0 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -64,36 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkehb-3-7-1::-webkit-scrollbar {
+._w5wkehb-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._w5wkehc-3-7-1 {
+._w5wkehc-3-8-0 {
   -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-7-1 {
+._w5wkehd-3-8-0 {
   -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-7-1 {
+._w5wkehe-3-8-0 {
   -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-7-1 {
+._w5wkehf-3-8-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._1jgl8s50-3-7-1 ._w5wkehf-3-7-1:hover:not(._w5wkeh2-3-7-1 ._w5wkehf-3-7-1) {
-  --_bx32h3-3-7-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-8-0 ._w5wkehf-3-8-0:hover:not(._w5wkeh2-3-8-0 ._w5wkehf-3-8-0) {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._w5wkehf-3-7-1:active:not(._w5wkeh2-3-7-1 ._w5wkehf-3-7-1) {
-  --_bx32h3-3-7-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-8-0 ._w5wkehf-3-8-0:active:not(._w5wkeh2-3-8-0 ._w5wkehf-3-8-0) {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._w5wkehg-3-7-1 {
+._w5wkehg-3-8-0 {
   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-7-1);
+  box-shadow: var(--_w5wkeh0-3-8-0);
 }
-._w5wkehg-3-7-1:hover {
+._w5wkehg-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._w5wkehg-3-7-1:active {
+._w5wkehg-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._w5wkehg-3-7-1 {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0 {
   margin: 0;
   padding: 5px var(--dt-spacings-size-6, 6px);
   border-radius: 5px;
 }
-._w5wkeh2-3-7-1 ._w5wkehg-3-7-1 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh2-3-7-1 ._w5wkehg-3-7-1:hover {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._w5wkeh2-3-7-1 ._w5wkehg-3-7-1:active {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._w5wkehg-3-7-1._w5wkeh3-3-7-1 {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0 {
   cursor: not-allowed;
   background-color: transparent;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkehg-3-7-1._w5wkeh3-3-7-1:hover {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0:hover {
   background-color: transparent;
 }
-._w5wkehg-3-7-1._w5wkeh3-3-7-1:active {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0:active {
   background-color: transparent;
 }
-._w5wkeh2-3-7-1 ._w5wkehg-3-7-1._w5wkeh3-3-7-1 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh3-3-8-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._w5wkehg-3-7-1._w5wkeh4-3-7-1 {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehg-3-7-1._w5wkeh4-3-7-1:hover {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkehg-3-7-1._w5wkeh4-3-7-1:active {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkeh2-3-7-1 ._w5wkehg-3-7-1._w5wkeh4-3-7-1 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh4-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkehg-3-7-1._w5wkeh1-3-7-1 {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-1._w5wkeh1-3-7-1:hover {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-1._w5wkeh1-3-7-1:active {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0:active {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-1._w5wkeh4-3-7-1._w5wkeh1-3-7-1:not(._w5wkeh2-3-7-1 ._w5wkehg-3-7-1) {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0._w5wkeh1-3-8-0:not(._w5wkeh2-3-8-0 ._w5wkehg-3-8-0) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jgl8s50-3-7-1 ._w5wkehg-3-7-1._w5wkeh1-3-7-1 {
-  --_w5wkeh0-3-7-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-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: 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-7-1 ._w5wkehg-3-7-1._w5wkeh1-3-7-1._w5wkeh3-3-7-1 {
-  --_w5wkeh0-3-7-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-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0._w5wkeh3-3-8-0 {
+  --_w5wkeh0-3-8-0: 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-7-1 ._w5wkeh2-3-7-1 ._w5wkehg-3-7-1._w5wkeh1-3-7-1 {
-  --_w5wkeh0-3-7-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-8-0 ._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: 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-7-1 ._w5wkeh2-3-7-1 ._w5wkehg-3-7-1._w5wkeh1-3-7-1._w5wkeh3-3-7-1 {
-  --_w5wkeh0-3-7-1: 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-8-0 ._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0._w5wkeh3-3-8-0 {
+  --_w5wkeh0-3-8-0: 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-7-1:first-child {
+._w5wkehg-3-8-0:first-child {
   margin-left: 1px;
 }
-._w5wkehg-3-7-1:last-child {
+._w5wkehg-3-8-0:last-child {
   margin-right: 1px;
 }
-._1jgl8s50-3-7-1 ._w5wkehg-3-7-1:first-child {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0:first-child {
   margin-left: 0;
 }
-._1jgl8s50-3-7-1 ._w5wkehg-3-7-1:last-child {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0:last-child {
   margin-right: 0;
 }
-._w5wkehh-3-7-1 {
+._w5wkehh-3-8-0 {
   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-7-1 {
+._w5wkehi-3-8-0 {
   min-width: 0;
   align-items: center;
 }