@dynatrace/strato-components 3.4.1 → 3.5.2

package/forms/date-time-range-picker/types.d.ts

@@ -1,3 +1,4 @@
+import type { FocusEventHandler } from 'react';
 import type { RequireAtLeastOne } from 'type-fest';
 import { AriaDisabledProps } from '../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
@@ -49,6 +50,10 @@ export type DateTimeRangePickerProps = FormControlProps<RequireAtLeastOne<{
         from?: string;
         to?: string;
     };
+    /**
+     *  Callback triggered when the element loses focus.
+     */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
 };
 /**
  * Imperative handler to give access to the DOM elements of the DateTimeRangePicker.

package/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -33,9 +33,27 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
       if (event.button !== 0) {
         return;
       }
-      window.getSelection()?.removeAllRanges();
       const root = event.currentTarget;
       const triggerElement = event.target;
+      const clickedOnSpinButton = triggerElement instanceof HTMLElement && triggerElement.hasAttribute("contenteditable");
+      let initialAnchorSpinButton = null;
+      if (!clickedOnSpinButton) {
+        const spinButtons = Array.from(
+          root.querySelectorAll("[contenteditable]")
+        );
+        let bestRight = -Infinity;
+        for (const sb of spinButtons) {
+          const rect = sb.getBoundingClientRect();
+          if (rect.right <= event.clientX && rect.right > bestRight) {
+            initialAnchorSpinButton = sb;
+            bestRight = rect.right;
+          }
+        }
+        if (initialAnchorSpinButton === null && spinButtons.length > 0) {
+          initialAnchorSpinButton = spinButtons[0] ?? null;
+        }
+      }
+      window.getSelection()?.removeAllRanges();
       if (root) {
         (0, import_selection_helpers.removeContentEditable)(
           root,
@@ -49,7 +67,8 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
                 onFocusInput();
               }
             }
-          }
+          },
+          initialAnchorSpinButton
         );
       }
     },
@@ -60,6 +79,7 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
   const onKeyDown = (0, import_react.useCallback)(
     async (event) => {
       const hasModifierKey = event.metaKey === true || event.ctrlKey === true;
+      const pickerRoot = event.currentTarget;
       if (event.key === "Shift" || event.key === "Control" || event.key === "Meta" || event.key === "Alt" || event.key === "Command") {
         event.preventDefault();
         return;
@@ -106,7 +126,11 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
           const boundaryExpressionRef = isSameExpressionSelection ? inputRefs.find(
             (inputRef) => inputRef.current?.expressionInputRef === crossExpressionElements[0]
           ) : void 0;
-          const plan2 = (0, import_selection_helpers.planBulkClear)(selection, inputRefs);
+          const plan2 = (0, import_selection_helpers.planBulkClear)(
+            selection,
+            inputRefs,
+            (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
+          );
           lastClearedSnapshotRef.current = plan2.snapshot;
           lastClearedExpressionsRef.current = plan2.clearedExpressions;
           const firstSpinButtonHandler = (0, import_selection_helpers.getFirstSnapshotHandler)(plan2.snapshot);
@@ -130,7 +154,11 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
           );
           return;
         }
-        const plan = (0, import_selection_helpers.planBulkClear)(selection, inputRefs);
+        const plan = (0, import_selection_helpers.planBulkClear)(
+          selection,
+          inputRefs,
+          (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
+        );
         const nextFocusedElementHandler = direction2 === "backward" ? (0, import_selection_helpers.getFirstSnapshotHandler)(plan.snapshot) : (0, import_selection_helpers.getLastSnapshotHandler)(plan.snapshot);
         const expressionFocusTarget = (0, import_selection_helpers.findFirstExpressionFocusTarget)(
           inputRefs,
@@ -225,7 +253,11 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
         if (selection && !selection.isCollapsed && selection.anchorNode !== selection.focusNode) {
           event.preventDefault();
           const inputRefs = getInputRefs(dateInputFromRef, dateInputToRef);
-          const plan = (0, import_selection_helpers.planBulkClear)(selection, inputRefs);
+          const plan = (0, import_selection_helpers.planBulkClear)(
+            selection,
+            inputRefs,
+            (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
+          );
           const firstEntry = plan.snapshot[0];
           const firstKey = firstEntry ? [
             ...firstEntry.inputRef.current?.spinButtonHandlers.keys() ?? []

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-4-1 {
+._1dphm0f0-3-5-2 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-4-1 {
+._1dphm0f1-3-5-2 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-4-1";
-var legend = "_1dphm0f1-3-4-1";
+var fieldset = "_1dphm0f0-3-5-2";
+var legend = "_1dphm0f1-3-5-2";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-4-1";
+var formField = "_mvcxum0-3-5-2";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-4-1 {
+._16z6rg10-3-5-2 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-4-1 {
+._16z6rg11-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-4-1 {
+._16z6rg12-3-5-2 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-4-1 {
+._16z6rg13-3-5-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-4-1 {
+._16z6rg14-3-5-2 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-4-1", variantClassNames: { variant: { hint: "_16z6rg11-3-4-1", error: "_16z6rg12-3-4-1" }, disabled: { true: "_16z6rg13-3-4-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-4-1";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-5-2", variantClassNames: { variant: { hint: "_16z6rg11-3-5-2", error: "_16z6rg12-3-5-2" }, disabled: { true: "_16z6rg13-3-5-2" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-5-2";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-4-1";
+var formFieldMessages = "_1l9bja60-3-5-2";

package/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-4-1 {
+._1gxatyo0-3-5-2 {
   display: inline-block;
 }
-._1gxatyo1-3-4-1 {
+._1gxatyo1-3-5-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-4-1:after {
+._1gxatyo2-3-5-2:after {
   content: "*" / "";
 }
-._1gxatyo3-3-4-1 {
+._1gxatyo3-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-4-1 {
+._1gxatyo4-3-5-2 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-4-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-4-1" }, required: { true: "_1gxatyo2-3-4-1" }, readOnly: { true: "_1gxatyo3-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-4-1";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-5-2", variantClassNames: { disabled: { true: "_1gxatyo1-3-5-2" }, required: { true: "_1gxatyo2-3-5-2" }, readOnly: { true: "_1gxatyo3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-5-2";

package/forms/forms-core/hooks/useFormFieldValidation.d.ts

@@ -21,11 +21,25 @@ interface FormFieldValidationProps {
     onBlur: (event?: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
 }
 /**
+ * Hook to generate ARIA props based on the form field messages
+ * @param ariaLabelingProps - ARIA labeling properties
+ * @returns ARIA props for the form field
  * @internal
+ */
+export declare function useFormFieldValidationAriaProps(ariaLabelingProps?: AriaLabelingProps): {
+    'aria-describedby': string | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-details'?: string;
+};
+/**
  * @param ref - Reference to the input element
  * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).
  * @param ariaLabelingProps - ARIA labeling properties
  * @param controlId - Optional control ID for message management
+ * @internal
  */
 export declare function useFormFieldValidation(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>, validationDeps?: Record<string, string | number | boolean | undefined>, ariaLabelingProps?: AriaLabelingProps, controlId?: string): FormFieldValidationProps;
 export declare function getCombinedAriaProps(validationAriaProps: Pick<AriaAttributes, 'aria-errormessage' | 'aria-invalid' | 'aria-describedby'>, labelingProps: AriaLabelingProps): {

package/forms/forms-core/hooks/useFormFieldValidation.js

@@ -20,7 +20,8 @@ __export(useFormFieldValidation_exports, {
   getCombinedAriaProps: () => getCombinedAriaProps,
   getErrorType: () => getErrorType,
   getI18nErrorMessage: () => getI18nErrorMessage,
-  useFormFieldValidation: () => useFormFieldValidation
+  useFormFieldValidation: () => useFormFieldValidation,
+  useFormFieldValidationAriaProps: () => useFormFieldValidationAriaProps
 });
 module.exports = __toCommonJS(useFormFieldValidation_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -161,9 +162,8 @@ function getI18nErrorMessage(key, ref) {
       return null;
   }
 }
-function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
-  const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-  const errorId = (0, import_useId.useId)();
+function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
+  const { state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const _ariaProps = (0, import_react.useMemo)(() => {
     let messageIdsString;
     let errorMessageIdsString;
@@ -179,6 +179,12 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     };
   }, [state.customMessages, state.formControlMessages, state.showError]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
+  return ariaProps;
+}
+function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
+  const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const errorId = (0, import_useId.useId)();
+  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   const formControlMessagesRef = (0, import_react.useRef)(state.formControlMessages);
   formControlMessagesRef.current = state.formControlMessages;
   const updateErrorMessages = (0, import_react.useCallback)(() => {

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-4-1 {
+@keyframes _yfwka31-3-5-2 {
 
 }
-@keyframes _yfwka32-3-4-1 {
+@keyframes _yfwka32-3-5-2 {
 
 }
-._yfwka33-3-4-1:-webkit-autofill:is(._yfwka33-3-4-1,:hover,:focus) {
+._yfwka33-3-5-2:-webkit-autofill:is(._yfwka33-3-5-2,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-4-1) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-5-2) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-4-1:-webkit-autofill {
-  animation-name: _yfwka31-3-4-1;
+._yfwka33-3-5-2:-webkit-autofill {
+  animation-name: _yfwka31-3-5-2;
   animation-duration: 0.001s;
 }
-._yfwka33-3-4-1:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-4-1;
+._yfwka33-3-5-2:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-5-2;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -24,7 +24,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-4-1)";
-var autofillCSS = "_yfwka33-3-4-1";
-var end = "_yfwka32-3-4-1";
-var start = "_yfwka31-3-4-1";
+var autofillBackground = "var(--_yfwka30-3-5-2)";
+var autofillCSS = "_yfwka33-3-5-2";
+var end = "_yfwka32-3-5-2";
+var start = "_yfwka31-3-5-2";

package/forms/password-input/PasswordInput.js

@@ -31,6 +31,7 @@ var import_extract_behavior_tracking_props = require("../../core/utils/extract-b
 var import_is_slot = require("../../core/utils/is-slot.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_BaseInput = require("../_base-input/BaseInput.js");
+var import_baseInputMessages = require("../_base-input/baseInputMessages.js");
 const COMPONENT_NAME = "PasswordInput";
 function getTooltipSlot(children) {
   const slots = {
@@ -46,6 +47,10 @@ function getTooltipSlot(children) {
   return slots;
 }
 const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+  const intl = (0, import_react_intl.useIntl)();
+  const defaultPlaceholder = intl.formatMessage(
+    (0, import_baseInputMessages.getPlaceholderMessage)("password")
+  );
   const {
     onChange,
     name,
@@ -61,6 +66,7 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
     style: consumerStyle,
     defaultValue,
     value,
+    placeholder = defaultPlaceholder,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -78,7 +84,6 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
   const tooltipBehavioralTrackingProps = (0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(
     remainingTooltipProps
   );
-  const intl = (0, import_react_intl.useIntl)();
   const showTooltipDefaultText = intl.formatMessage({
     defaultMessage: "Show password",
     id: "tgL6QEjmq+ArASFk",
@@ -112,6 +117,7 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
       disabled,
       "aria-disabled": ariaDisabledProp,
       "data-dt-component": COMPONENT_NAME,
+      placeholder,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseInput.BaseInput.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_BaseInput.BaseInput.Button,
         {

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-4-1 {
+._h96idu0-3-5-2 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-4-1 {
+._h96idu1-3-5-2 {
   cursor: default;
 }
-._h96idu5-3-4-1 {
+._h96idu5-3-5-2 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-4-1._h96idu3-3-4-1 {
+._h96idu5-3-5-2._h96idu3-3-5-2 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-4-1 ._h96idu5-3-4-1 {
+._h96idu1-3-5-2 ._h96idu5-3-5-2 {
   cursor: default;
 }
-._h96idu6-3-4-1 {
+._h96idu6-3-5-2 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-4-1);
+  background-color: var(--_bx32h3-3-5-2);
 }
-._h96idu7-3-4-1 {
+._h96idu7-3-5-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-4-1 {
+._h96idue-3-5-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-4-1 {
+._h96idug-3-5-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-4-1 {
+._h96iduh-3-5-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-4-1 {
+._h96idui-3-5-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-4-1 {
+._h96iduj-3-5-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-4-1 {
+._h96iduk-3-5-2 {
   height: 100%;
-  fill: var(--_bx32h1-3-4-1);
+  fill: var(--_bx32h1-3-5-2);
 }
-._h96idu5-3-4-1:not(._h96idu4-3-4-1) ._h96iduk-3-4-1 {
+._h96idu5-3-5-2:not(._h96idu4-3-5-2) ._h96iduk-3-5-2 {
   display: none;
 }
-._h96idu1-3-4-1 ._h96iduk-3-4-1 {
+._h96idu1-3-5-2 ._h96iduk-3-5-2 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-4-1._h96idu1-3-4-1 ._h96iduk-3-4-1 {
+._h96idu2-3-5-2._h96idu1-3-5-2 ._h96iduk-3-5-2 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/radio/styles.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu4-3-4-1";
-var disabled = "_h96idu3-3-4-1";
-var group = "_h96idu0-3-4-1";
-var hasError = "_h96idu2-3-4-1";
-var innerKnob = "_h96iduk-3-4-1";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-4-1", variantClassNames: { disabled: { true: "_h96idu7-3-4-1" }, checked: { true: "_h96idu8-3-4-1", false: "_h96idu9-3-4-1" }, hasError: { true: "_h96idua-3-4-1", false: "_h96idub-3-4-1" }, isFocusVisible: { true: "_h96iduc-3-4-1", false: "_h96idud-3-4-1" }, readOnly: { true: "_h96idue-3-4-1", false: "_h96iduf-3-4-1" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-4-1"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-4-1"], [{ readOnly: true, disabled: false }, "_h96idui-3-4-1"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-4-1"]] });
-var label = "_h96idu5-3-4-1";
-var readOnly = "_h96idu1-3-4-1";
+var checked = "_h96idu4-3-5-2";
+var disabled = "_h96idu3-3-5-2";
+var group = "_h96idu0-3-5-2";
+var hasError = "_h96idu2-3-5-2";
+var innerKnob = "_h96iduk-3-5-2";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-5-2", variantClassNames: { disabled: { true: "_h96idu7-3-5-2" }, checked: { true: "_h96idu8-3-5-2", false: "_h96idu9-3-5-2" }, hasError: { true: "_h96idua-3-5-2", false: "_h96idub-3-5-2" }, isFocusVisible: { true: "_h96iduc-3-5-2", false: "_h96idud-3-5-2" }, readOnly: { true: "_h96idue-3-5-2", false: "_h96iduf-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-5-2"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-5-2"], [{ readOnly: true, disabled: false }, "_h96idui-3-5-2"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-5-2"]] });
+var label = "_h96idu5-3-5-2";
+var readOnly = "_h96idu1-3-5-2";

package/forms/search-input/SearchInput.css

@@ -1,3 +1,3 @@
-._1mumub80-3-4-1 {
+._1mumub80-3-5-2 {
   min-width: 192px;
 }

package/forms/search-input/SearchInput.sty.js

@@ -21,4 +21,4 @@ __export(SearchInput_css_exports, {
 });
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
-var searchInput = "_1mumub80-3-4-1";
+var searchInput = "_1mumub80-3-5-2";

package/forms/select/components/Control.js

@@ -42,6 +42,7 @@ var import_useId = require("../../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
 var import_OverlayStackingProvider = require("../../../core/providers/OverlayStackingProvider.js");
 var import_useFocusRing = require("../../../core/styles/useFocusRing.js");
+var import_is_visual_refresh_enabled = require("../../../core/utils/is-visual-refresh-enabled.js");
 var import_merge_props = require("../../../core/utils/merge-props.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_FormFieldMessageBaseItem = require("../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
@@ -82,6 +83,7 @@ function Control(props) {
     selectProps.controlState
   );
   const showError = selectProps.controlState ? hasFormControlError : state.showError;
+  const isCritical = (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? showError && !isDisabled : showError;
   const hiddenReactSelectInput = Array.isArray(valueContainer.props.children) ? valueContainer.props.children[1] : null;
   const id = selectProps["selectInputId"];
   const hiddenInput = (0, import_react.useMemo)(
@@ -186,7 +188,7 @@ function Control(props) {
         ...innerProps,
         variant: "emphasized",
         ...isDisabled ? void 0 : interactionProps,
-        color: showError ? "critical" : "neutral",
+        color: isCritical ? "critical" : "neutral",
         className: (0, import_clsx.default)(
           "strato-components-select-control-trigger",
           styles.selectTrigger({

package/forms/select/components/Menu.js

@@ -41,7 +41,6 @@ var import_react_dom = require("react-dom");
 var import_react_intl = require("react-intl");
 var import_react_popper = require("react-popper");
 var import_borders = __toESM(require("@dynatrace/strato-design-tokens/borders"));
-var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_Button = require("../../../buttons/button/Button.js");
 var import_ProgressCircle = require("../../../content/progress/ProgressCircle.js");
@@ -419,15 +418,15 @@ function Menu(props) {
               paddingY: 6,
               paddingLeft: 8,
               paddingRight: 12,
-              style: { color: import_colors.default.Text.Neutral.Subdued },
+              className: styles.selectMenuLoadingWrapper,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCircle.ProgressCircle, { size: "small", "aria-labelledby": ariaLabelId }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { id: ariaLabelId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_react_intl.FormattedMessage,
                   {
                     description: "Label for the loading state.",
-                    defaultMessage: "Loading options",
-                    id: "czzQ2HD9zu/eqPFy"
+                    defaultMessage: "Loading",
+                    id: "cycz+bYG+VH7Of4e"
                   }
                 ) })
               ]

package/forms/select/components/Option.js

@@ -35,6 +35,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_TextEllipsisAroundChildren = require("../../../core/components/TextEllipsisAroundChildren.js");
 var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
+var import_getVirtualFocusStyles = require("../../../core/styles/getVirtualFocusStyles.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_use_select_menu_context = require("../hooks/use-select-menu-context.js");
 var import_select_menu_state_reducer = require("../state/select-menu-state-reducer.js");
@@ -64,6 +65,11 @@ function Option(props) {
     suffix.componentProps ?? {}
   );
   const { dispatch } = (0, import_use_select_menu_context.useSelectMenuContext)();
+  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;
+  const { className: virtualFocusClassName } = (0, import_getVirtualFocusStyles.getVirtualFocusStyles)(
+    isVirtuallyFocused,
+    isSelected && !isMulti ? "primary" : "neutral"
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -73,9 +79,9 @@ function Option(props) {
       className: (0, import_clsx.default)(
         "strato-select-option",
         isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,
+        virtualFocusClassName,
         {
           "strato-select-option--selected": isSelected,
-          "strato-select-option--focus": selectProps.focusOnOption ? isFocused : false,
           "strato-select-option--disabled": isDisabled
         },
         consumerClassName