@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -1,16 +1,16 @@
 import "./Presets.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var displayValueWrapper = "_14rlfn36-3-7-0";
-var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-7-0", variantClassNames: { state: { rest: "_14rlfn3f-3-7-0", selected: "_14rlfn3g-3-7-0", disabled: "_14rlfn3h-3-7-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-7-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-7-0", false: "_14rlfn3k-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var item = _7a468({ defaultClassName: "_14rlfn31-3-7-0", variantClassNames: { state: { rest: "_14rlfn32-3-7-0", selected: "_14rlfn33-3-7-0", disabled: "_14rlfn34-3-7-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-7-0";
-var listContainer = "_14rlfn3l-3-7-0";
-var mediaQuery = "_14rlfn3d-3-7-0";
-var recentHeading = "_14rlfn3m-3-7-0";
-var recentIcon = "_14rlfn3n-3-7-0";
-var timeframeDisplayValue = "_14rlfn37-3-7-0";
-var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-7-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-7-0", false: "_14rlfn3a-3-7-0" }, isDisabled: { true: "_14rlfn3b-3-7-0", false: "_14rlfn3c-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-8-0";
+var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-8-0", variantClassNames: { state: { rest: "_14rlfn3f-3-8-0", selected: "_14rlfn3g-3-8-0", disabled: "_14rlfn3h-3-8-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-8-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-8-0", false: "_14rlfn3k-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var item = _7a468({ defaultClassName: "_14rlfn31-3-8-0", variantClassNames: { state: { rest: "_14rlfn32-3-8-0", selected: "_14rlfn33-3-8-0", disabled: "_14rlfn34-3-8-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-8-0";
+var listContainer = "_14rlfn3l-3-8-0";
+var mediaQuery = "_14rlfn3d-3-8-0";
+var recentHeading = "_14rlfn3m-3-8-0";
+var recentIcon = "_14rlfn3n-3-8-0";
+var timeframeDisplayValue = "_14rlfn37-3-8-0";
+var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-8-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-8-0", false: "_14rlfn3a-3-8-0" }, isDisabled: { true: "_14rlfn3b-3-8-0", false: "_14rlfn3c-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   displayValueWrapper,
   formattedPresetValue,

package/esm/filters/timeframe-selector/components/presets/Presets.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/Presets.css.ts"],
-  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-7-0';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-7-0',variantClassNames:{state:{rest:'_14rlfn3f-3-7-0',selected:'_14rlfn3g-3-7-0',disabled:'_14rlfn3h-3-7-0'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-7-0',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-7-0',false:'_14rlfn3k-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-7-0',variantClassNames:{state:{rest:'_14rlfn32-3-7-0',selected:'_14rlfn33-3-7-0',disabled:'_14rlfn34-3-7-0'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-7-0';\nexport var listContainer = '_14rlfn3l-3-7-0';\nexport var mediaQuery = '_14rlfn3d-3-7-0';\nexport var recentHeading = '_14rlfn3m-3-7-0';\nexport var recentIcon = '_14rlfn3n-3-7-0';\nexport var timeframeDisplayValue = '_14rlfn37-3-7-0';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-7-0',variantClassNames:{isSelected:{true:'_14rlfn39-3-7-0',false:'_14rlfn3a-3-7-0'},isDisabled:{true:'_14rlfn3b-3-7-0',false:'_14rlfn3c-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-8-0';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-8-0',variantClassNames:{state:{rest:'_14rlfn3f-3-8-0',selected:'_14rlfn3g-3-8-0',disabled:'_14rlfn3h-3-8-0'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-8-0',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-8-0',false:'_14rlfn3k-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-8-0',variantClassNames:{state:{rest:'_14rlfn32-3-8-0',selected:'_14rlfn33-3-8-0',disabled:'_14rlfn34-3-8-0'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-8-0';\nexport var listContainer = '_14rlfn3l-3-8-0';\nexport var mediaQuery = '_14rlfn3d-3-8-0';\nexport var recentHeading = '_14rlfn3m-3-8-0';\nexport var recentIcon = '_14rlfn3n-3-8-0';\nexport var timeframeDisplayValue = '_14rlfn37-3-8-0';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-8-0',variantClassNames:{isSelected:{true:'_14rlfn39-3-8-0',false:'_14rlfn3a-3-8-0'},isDisabled:{true:'_14rlfn3b-3-8-0',false:'_14rlfn3c-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,OAAM,OAAM,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtL,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,GAAE,iBAAgB,EAAC,OAAM,OAAM,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrO,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,24 +1,24 @@
-._attccb0-3-7-0 {
+._attccb0-3-8-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-7-0) ._attccb0-3-7-0 {
+:root:not(._1jgl8s50-3-8-0) ._attccb0-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._attccb1-3-7-0 {
+._attccb1-3-8-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb0-3-7-0 ._attccb1-3-7-0 {
+._attccb0-3-8-0 ._attccb1-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._attccb2-3-7-0 {
+._attccb2-3-8-0 {
   transform: rotate(180deg);
 }
-._1jgl8s50-3-7-0 ._attccb3-3-7-0:hover, ._1jgl8s50-3-7-0 ._attccb3-3-7-0:active {
-  --_bx32h3-3-7-0: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-7-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-8-0 ._attccb3-3-8-0:hover, ._1jgl8s50-3-8-0 ._attccb3-3-8-0:active {
+  --_bx32h3-3-8-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-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-0 ._attccb4-3-7-0:hover, ._1jgl8s50-3-7-0 ._attccb4-3-7-0:active {
-  --_bx32h3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_bx32h4-3-7-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-8-0 ._attccb4-3-8-0:hover, ._1jgl8s50-3-8-0 ._attccb4-3-8-0:active {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_bx32h4-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);
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.js

@@ -9,7 +9,7 @@ import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { isTimeframeSelectorDisplayValueElement } from "./DisplayValue.js";
 import * as styles from "./Trigger.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
-import { isVisualRefreshEnabled } from "../../../../core/utils/is-visual-refresh-enabled.js";
+import { useVisualRefreshEnabled } from "../../../../core/hooks/useVisualRefreshEnabled.js";
 import { mergeProps as _mergeProps } from "../../../../core/utils/merge-props.js";
 import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 function isTimeframeSelectorTriggerElement(child) {
@@ -46,7 +46,7 @@ const Trigger = (props) => {
     showError,
     disabled
   } = useTimeframeSelectorContext();
-  const isCritical = isVisualRefreshEnabled() ? showError && !disabled : showError;
+  const isCritical = useVisualRefreshEnabled() ? showError && !disabled : showError;
   const color = isCritical ? "critical" : "neutral";
   const displayValue = displayValueSlot ?? contextDisplayValue;
   const placeholderIfEmpty = placeholder ?? contextDisplayValue;

package/esm/filters/timeframe-selector/components/trigger/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.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 { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isVisualRefreshEnabled } from '../../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      textAlign=\"start\"\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
-  "mappings": "AAkGI,SAaI,KAbJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AAKvB,SAAS,8BAA8B;AACvC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,uBAAuB,IACtC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useVisualRefreshEnabled } from '../../../../core/hooks/useVisualRefreshEnabled.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 { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = useVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      textAlign=\"start\"\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
+  "mappings": "AAkGI,SAaI,KAbJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,+BAA+B;AAKxC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,wBAAwB,IACvC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -1,10 +1,10 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "../../../../styles/field.css";
 import "./Trigger.css";
-var readOnly = "_attccb0-3-7-0";
-var readOnlyColor = { neutral: "_attccb3-3-7-0", critical: "_attccb4-3-7-0" };
-var suffix = "_attccb1-3-7-0";
-var suffixOpen = "_attccb2-3-7-0";
+var readOnly = "_attccb0-3-8-0";
+var readOnlyColor = { neutral: "_attccb3-3-8-0", critical: "_attccb4-3-8-0" };
+var suffix = "_attccb1-3-8-0";
+var suffixOpen = "_attccb2-3-8-0";
 export {
   readOnly,
   readOnlyColor,

package/esm/filters/timeframe-selector/components/trigger/Trigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-7-0';\nexport var readOnlyColor = {neutral:'_attccb3-3-7-0',critical:'_attccb4-3-7-0'};\nexport var suffix = '_attccb1-3-7-0';\nexport var suffixOpen = '_attccb2-3-7-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-8-0';\nexport var readOnlyColor = {neutral:'_attccb3-3-8-0',critical:'_attccb4-3-8-0'};\nexport var suffix = '_attccb1-3-8-0';\nexport var suffixOpen = '_attccb2-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,gBAAgB,EAAC,SAAQ,kBAAiB,UAAS,iBAAgB;AACvE,IAAI,SAAS;AACb,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/_base-input/BaseInput.css

@@ -1,27 +1,27 @@
-._1a8lqy90-3-7-0 {
-  --_bx32h5-3-7-0: 1;
+._1a8lqy90-3-8-0 {
+  --_bx32h5-3-8-0: 1;
 }
-._1a8lqy91-3-7-0 {
-  --_bx32h5-3-7-0: 3;
+._1a8lqy91-3-8-0 {
+  --_bx32h5-3-8-0: 3;
 }
-._1a8lqy91-3-7-0:hover {
-  --_bx32h5-3-7-0: 4;
+._1a8lqy91-3-8-0:hover {
+  --_bx32h5-3-8-0: 4;
 }
-._1a8lqy91-3-7-0:active {
-  --_bx32h5-3-7-0: 4;
+._1a8lqy91-3-8-0:active {
+  --_bx32h5-3-8-0: 4;
 }
-._1a8lqy92-3-7-0 {
-  --_bx32h5-3-7-0: 0;
+._1a8lqy92-3-8-0 {
+  --_bx32h5-3-8-0: 0;
 }
-._1a8lqy92-3-7-0:hover {
-  --_bx32h5-3-7-0: 0;
+._1a8lqy92-3-8-0:hover {
+  --_bx32h5-3-8-0: 0;
 }
-._1a8lqy92-3-7-0:active {
-  --_bx32h5-3-7-0: 0;
+._1a8lqy92-3-8-0:active {
+  --_bx32h5-3-8-0: 0;
 }
-._1a8lqy98-3-7-0 {
-  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-7-0: var(--_1a8lqy96-3-7-0);
+._1a8lqy98-3-8-0 {
+  --_1a8lqy96-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-8-0: var(--_1a8lqy96-3-8-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -32,91 +32,91 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  background-color: var(--_1a8lqy96-3-7-0);
-  box-shadow: var(--_1a8lqy97-3-7-0);
+  background-color: var(--_1a8lqy96-3-8-0);
+  box-shadow: var(--_1a8lqy97-3-8-0);
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
 }
-._1a8lqy98-3-7-0:hover {
-  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-8-0:hover {
+  --_1a8lqy96-3-8-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy98-3-7-0:active {
-  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-8-0:active {
+  --_1a8lqy96-3-8-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0 {
+._1a8lqy91-3-8-0 ._1a8lqy98-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0:hover {
+._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0) ._1a8lqy98-3-8-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0:active {
+._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0) ._1a8lqy98-3-8-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy93-3-7-0 ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy93-3-8-0 ._1a8lqy98-3-8-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-:where(:root:not(._1jgl8s50-3-7-0)) ._1a8lqy93-3-7-0._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
+:where(:root:not(._1jgl8s50-3-8-0)) ._1a8lqy93-3-8-0._1a8lqy91-3-8-0 ._1a8lqy98-3-8-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy92-3-7-0 ._1a8lqy98-3-7-0 {
+._1a8lqy92-3-8-0 ._1a8lqy98-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy95-3-7-0:not(:hover) ._1a8lqy98-3-7-0 {
+._1a8lqy95-3-8-0:not(:hover) ._1a8lqy98-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy95-3-8-0:is(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0 ._1a8lqy98-3-7-0,
-    ._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0 ._1a8lqy98-3-7-0:is(:hover, :active),
-    ._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:is(:hover, :active),
-    ._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):is(:hover, :active) ._1a8lqy98-3-7-0 {
+._1jgl8s50-3-8-0 ._1a8lqy94-3-8-0 ._1a8lqy98-3-8-0,
+    ._1jgl8s50-3-8-0 ._1a8lqy94-3-8-0 ._1a8lqy98-3-8-0:is(:hover, :active),
+    ._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:is(:hover, :active),
+    ._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):is(:hover, :active) ._1a8lqy98-3-8-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0,
-    ._1jgl8s50-3-7-0 :where(._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)):hover ._1a8lqy98-3-7-0 {
-  --_1a8lqy97-3-7-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-8-0 ._1a8lqy94-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0,
+    ._1jgl8s50-3-8-0 :where(._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)):hover ._1a8lqy98-3-8-0 {
+  --_1a8lqy97-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-0 :is(._1a8lqy94-3-7-0, ._1a8lqy95-3-7-0):not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:hover {
-  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-8-0 :is(._1a8lqy94-3-8-0, ._1a8lqy95-3-8-0):not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:hover {
+  --_1a8lqy97-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-7-0 :is(._1a8lqy94-3-7-0, ._1a8lqy95-3-7-0):not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:active {
-  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-8-0 :is(._1a8lqy94-3-8-0, ._1a8lqy95-3-8-0):not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:active {
+  --_1a8lqy97-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-7-0 :where(._1a8lqy94-3-7-0)._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0,
-      ._1jgl8s50-3-7-0 :where(._1a8lqy95-3-7-0)._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover ._1a8lqy98-3-7-0 {
-  --_1a8lqy97-3-7-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-8-0 :where(._1a8lqy94-3-8-0)._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0) ._1a8lqy98-3-8-0,
+      ._1jgl8s50-3-8-0 :where(._1a8lqy95-3-8-0)._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover ._1a8lqy98-3-8-0 {
+  --_1a8lqy97-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-0 ._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:hover {
-  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-8-0 ._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:hover {
+  --_1a8lqy97-3-8-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-7-0 ._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:active {
-  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-8-0 ._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0:active {
+  --_1a8lqy97-3-8-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0 {
-  --_1a8lqy97-3-7-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-8-0 ._1a8lqy94-3-8-0:is(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0 {
+  --_1a8lqy97-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-0 ._1a8lqy94-3-7-0._1a8lqy91-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0 {
-  --_1a8lqy97-3-7-0: 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 ._1a8lqy94-3-8-0._1a8lqy91-3-8-0:is(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0) ._1a8lqy98-3-8-0 {
+  --_1a8lqy97-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);
 }
-._1a8lqy99-3-7-0 {
+._1a8lqy99-3-8-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy9a-3-7-0 {
+._1a8lqy9a-3-8-0 {
   padding-right: 0;
 }
-._1a8lqy9b-3-7-0 {
+._1a8lqy9b-3-8-0 {
   padding-right: unset;
 }
-._1a8lqy9c-3-7-0 {
+._1a8lqy9c-3-8-0 {
   padding-left: unset;
 }
-._1a8lqy9d-3-7-0 {
+._1a8lqy9d-3-8-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -130,134 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9d-3-7-0:focus {
+._1a8lqy9d-3-8-0:focus {
   outline: none;
 }
-._1a8lqy9d-3-7-0::placeholder {
+._1a8lqy9d-3-8-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9d-3-7-0::-webkit-search-cancel-button {
+._1a8lqy9d-3-8-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9d-3-7-0::-ms-reveal {
+._1a8lqy9d-3-8-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-7-0 ._1a8lqy9d-3-7-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-7-0 ._1a8lqy9d-3-7-0::placeholder {
+._1a8lqy91-3-8-0 ._1a8lqy9d-3-8-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-8-0 ._1a8lqy9d-3-8-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0::placeholder {
+._1a8lqy92-3-8-0 ._1a8lqy9d-3-8-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-8-0 ._1a8lqy9d-3-8-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0 {
+._1a8lqy92-3-8-0 ._1a8lqy9d-3-8-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-7-0 ._1a8lqy9d-3-7-0 {
+._1a8lqy93-3-8-0 ._1a8lqy9d-3-8-0 {
   cursor: default;
 }
-button ._1a8lqy9d-3-7-0 {
+button ._1a8lqy9d-3-8-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-7-0 {
+._1a8lqy9e-3-8-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9e-3-7-0:is(button._1a8lqy9e-3-7-0._1a8lqy9e-3-7-0) {
+._1a8lqy9e-3-8-0:is(button._1a8lqy9e-3-8-0._1a8lqy9e-3-8-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9f-3-7-0 {
+._1a8lqy9f-3-8-0 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy9f-3-7-0 {
+._1a8lqy91-3-8-0:not(._1a8lqy92-3-8-0) ._1a8lqy9f-3-8-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
+._1a8lqy94-3-8-0._1a8lqy93-3-8-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy94-3-7-0._1a8lqy93-3-7-0._1a8lqy91-3-7-0 button:not(:hover, :active) {
+._1a8lqy94-3-8-0._1a8lqy93-3-8-0._1a8lqy91-3-8-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
+._1jgl8s50-3-8-0 ._1a8lqy94-3-8-0._1a8lqy93-3-8-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button {
-  --_bx32h4-3-7-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-8-0 ._1a8lqy94-3-8-0._1a8lqy93-3-8-0 button {
+  --_bx32h4-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);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:hover {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:active {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:hover {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:active {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy95-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
+._1a8lqy95-3-8-0._1a8lqy93-3-8-0 button:not(:hover, :active) {
   background-color: transparent;
 }
-._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:is(:disabled, [aria-disabled=true]) {
+._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button {
   background-color: var(--dt-colors-background-surface-default, #fff);
   box-shadow: 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-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:hover {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:active {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0) button:hover {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0) button:hover {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0) button:active {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0) button:active {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: 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-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:hover {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:active {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0, ._1a8lqy93-3-8-0)._1a8lqy91-3-8-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0)._1a8lqy91-3-7-0 button:hover {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0)._1a8lqy91-3-8-0 button:hover {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0)._1a8lqy91-3-7-0 button:active {
+._1jgl8s50-3-8-0 ._1a8lqy95-3-8-0:not(._1a8lqy92-3-8-0)._1a8lqy91-3-8-0 button:active {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1a8lqy98-3-7-0:has(._1a8lqy9e-3-7-0:hover) {
+._1a8lqy98-3-8-0:has(._1a8lqy9e-3-8-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-:where(:root:not(._1jgl8s50-3-7-0)) ._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:has(._1a8lqy9e-3-7-0:hover):not(._1a8lqy92-3-7-0) {
+:where(:root:not(._1jgl8s50-3-8-0)) ._1a8lqy91-3-8-0 ._1a8lqy98-3-8-0:has(._1a8lqy9e-3-8-0:hover):not(._1a8lqy92-3-8-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy98-3-7-0:hover ._1a8lqy9f-3-7-0 {
+._1a8lqy98-3-8-0:hover ._1a8lqy9f-3-8-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:hover ._1a8lqy9f-3-7-0 {
+._1a8lqy91-3-8-0 ._1a8lqy98-3-8-0:hover ._1a8lqy9f-3-8-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy98-3-7-0._1a8lqy9g-3-7-0 div svg {
+._1a8lqy98-3-8-0._1a8lqy9g-3-8-0 div svg {
   fill: currentcolor;
 }

package/esm/forms/_base-input/BaseInput.js

@@ -16,6 +16,8 @@ import {
   BaseInputReservedSuffix,
   BaseInputSuffix
 } from "./BaseInputContent.js";
+import { getPlaceholderMessage } from "./baseInputMessages.js";
+import { ClearButton } from "./ClearButton.js";
 import { BaseInputContext } from "./contexts/BaseInputContext.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
@@ -28,13 +30,16 @@ import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js
 import { InputGroup } from "../../layouts/input-group/InputGroup.js";
 import { InternalBaseItem as BaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
-import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
+import {
+  getI18nValidationState,
+  useFormFieldValidation
+} 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 { useAutofillEvent } from "../hooks/useAutofillEvent.js";
 import { useInputHint } from "../hooks/useInputHint.js";
-import { getPlaceholderMessage } from "./baseInputMessages.js";
-import { ClearButton } from "./ClearButton.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 function getSlots(children) {
   const validSlots = Children.toArray(children).filter(
     isValidElement
@@ -91,6 +96,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     style: consumerStyle,
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     onClear,
+    onValidityChange,
     type,
     placeholder = defaultPlaceholder,
     value,
@@ -121,6 +127,11 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { isAutoFilled, onAnimationStart } = useAutofillEvent();
   const inputRef = useRef(null);
   const wrapperRef = useRef(null);
+  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => getI18nValidationState(intl, inputRef.current, "manual")
+  );
   const { focusProps, focusClassName } = useFocusRing({
     color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
@@ -144,7 +155,9 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "aria-labelledby": ariaLabelledByProp,
       "aria-describedby": ariaDescribedByProp,
       "aria-details": ariaDetailsProp
-    }
+    },
+    void 0,
+    _emitValidationState
   );
   const eventListener = { onChange, onBlur, onInvalid };
   useImperativeHandle(
@@ -161,9 +174,23 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          getI18nValidationState(intl, inputRef.current, "manual")
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        inputRef.current?.checkValidity();
+        dispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        return emitValidationState(
+          getI18nValidationState(intl, inputRef.current, "manual")
+        );
       }
     }),
-    [dispatch]
+    [dispatch, emitValidationState, intl]
   );
   const context = useMemo(
     () => ({ variant, hasError, disabled, ariaDisabled }),