@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -1,17 +1,17 @@
-._16z6rg10-3-11-2 {
+._16z6rg10-3-12-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-11-2 {
+._16z6rg11-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-11-2 {
+._16z6rg12-3-12-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-11-2 {
+._16z6rg13-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-11-2 {
+._16z6rg14-3-12-0 {
   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-11-2", variantClassNames: { variant: { hint: "_16z6rg11-3-11-2", error: "_16z6rg12-3-11-2" }, disabled: { true: "_16z6rg13-3-11-2" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-11-2";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-12-0", variantClassNames: { variant: { hint: "_16z6rg11-3-12-0", error: "_16z6rg12-3-12-0" }, disabled: { true: "_16z6rg13-3-12-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-12-0";

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

@@ -1,9 +1,9 @@
-._1l9bja60-3-11-2 {
+._1l9bja60-3-12-0 {
   display: flex;
 }
-._1l9bja60-3-11-2:empty {
+._1l9bja60-3-12-0:empty {
   display: none;
 }
-._1l9bja60-3-11-2[aria-hidden='true'] {
+._1l9bja60-3-12-0[aria-hidden='true'] {
   display: none;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessages.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
+import type { DOMProps } from '../../../../core/types/dom.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { FormFieldControlMessage } from '../../types/formfield-messages.types.js';
@@ -8,13 +9,13 @@ import type { FormFieldControlMessage } from '../../types/formfield-messages.typ
  * Properties for the FormFieldMessages component.
  * @public
  */
-export type FormFieldMessageProps = MaskingProps & StylingProps & DataTestId & BehaviorTrackingProps & {
+export type FormFieldMessageProps = MaskingProps & StylingProps & DataTestId & DOMProps & BehaviorTrackingProps & {
     children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
 };
 /**
  * @public
  */
-export declare const FormFieldMessages: ((props: MaskingProps & StylingProps & DataTestId & BehaviorTrackingProps & {
+export declare const FormFieldMessages: ((props: MaskingProps & StylingProps & DataTestId & DOMProps & BehaviorTrackingProps & {
     children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Item: {

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

@@ -93,10 +93,11 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
     "data-dtrum-allow": dataDtrumAllow,
     "data-dtrum-mask": dataDtrumMask,
     "data-testid": dataTestId,
+    id,
     ...remainingProps
   } = FormFieldMessageProps;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
-  const { state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const { state, fieldMessagesContainerId, routesAwayFromField } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const { disabled, ariaDisabled } = (0, import_useFormFieldContext.useFormFieldContext)();
   const formContext = (0, import_react2.useContext)(import_FormContext.FormContext);
   const formControlId = state.formControlId;
@@ -107,7 +108,6 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
   const errorMessages = state.formControlMessages.filter(
     (message) => message.variant === "error"
   );
-  const routesAwayFromField = formContext !== void 0 && state.messageTarget !== void 0 && !state.messageTarget.includes("field");
   const visibleErrorMessages = routesAwayFromField ? errorMessages.filter((message) => message.source === "custom") : errorMessages;
   const internalHintMessages = state.formControlMessages.filter(
     (message) => message.variant === "hint"
@@ -166,6 +166,7 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
     import_Flex.Flex,
     {
       ref: forwardedRef,
+      id: id ?? fieldMessagesContainerId,
       flexDirection: "column",
       "aria-live": "polite",
       style: { ...consumerStyle },

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-11-2";
+var formFieldMessages = "_1l9bja60-3-12-0";

package/forms/forms-core/components/hint/Hint.d.ts

@@ -3,6 +3,7 @@ import { StylingProps } from '../../../../core/types/styling-props.js';
 import { WithChildren } from '../../../../core/types/with-children.js';
 /**
  * @public
+ * @deprecated in favor of `FormFieldMessages`.
  */
 export interface HintProps extends WithChildren, StylingProps, DataTestId {
     /**
@@ -15,6 +16,7 @@ export interface HintProps extends WithChildren, StylingProps, DataTestId {
 }
 /**
  * Renders a hint message if given, otherwise renders nothing.
+ * @deprecated in favor of `FormFieldMessages`.
  * @public
  */
 export declare const Hint: {

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

@@ -1,15 +1,15 @@
-._1gxatyo0-3-11-2 {
+._1gxatyo0-3-12-0 {
   display: inline-block;
 }
-._1gxatyo1-3-11-2 {
+._1gxatyo1-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-11-2:after {
+._1gxatyo2-3-12-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-11-2 {
+._1gxatyo3-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-11-2 {
+._1gxatyo4-3-12-0 {
   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-11-2", variantClassNames: { disabled: { true: "_1gxatyo1-3-11-2" }, required: { true: "_1gxatyo2-3-11-2" }, readOnly: { true: "_1gxatyo3-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-11-2";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-12-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-12-0" }, required: { true: "_1gxatyo2-3-12-0" }, readOnly: { true: "_1gxatyo3-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-12-0";

package/forms/forms-core/contexts/FormFieldMessageContext.d.ts

@@ -9,6 +9,9 @@ export interface FormFieldMessageContextProps {
     disabled?: boolean;
     dispatch?: Dispatch<FormFieldMessagesReducerAction>;
     state: FormFieldMessageContextState;
+    fieldMessagesContainerId?: string;
+    formMessagesContainerId?: string;
+    routesAwayFromField?: boolean;
 }
 /**
  * Context provider for `FormFieldMessageContextProps` to connect form controls to the applied errors and error messages.

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

@@ -226,21 +226,48 @@ function getI18nValidationState(intl, element, trigger) {
   );
 }
 function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
-  const { state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const {
+    state,
+    fieldMessagesContainerId,
+    formMessagesContainerId,
+    routesAwayFromField
+  } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const _ariaProps = (0, import_react.useMemo)(() => {
-    let messageIdsString;
-    let errorMessageIdsString;
-    if (state.customMessages.length > 0 || state.formControlMessages.length > 0) {
-      const messages = [...state.customMessages, ...state.formControlMessages];
-      errorMessageIdsString = messages.filter((msg) => msg.variant === "error").map((msg) => msg.id).join(" ");
-      messageIdsString = messages.map((msg) => msg.id).join(" ");
+    const hasHints = state.customMessages.some((m) => m.variant === "hint") || state.formControlMessages.some((m) => m.variant === "hint");
+    const hasInlineErrors = state.customMessages.some((m) => m.variant === "error") || state.formControlMessages.some(
+      (m) => m.variant === "error" && (!routesAwayFromField || m.source === "custom")
+    );
+    const hasRoutedErrors = routesAwayFromField && state.formControlMessages.some(
+      (m) => m.variant === "error" && m.source !== "custom"
+    );
+    const hasInlineContent = hasHints || state.showError && hasInlineErrors;
+    let activeErrorContainerId;
+    if (state.showError && hasInlineErrors) {
+      activeErrorContainerId = fieldMessagesContainerId;
+    } else if (state.showError && hasRoutedErrors) {
+      activeErrorContainerId = formMessagesContainerId;
+    }
+    const ariaDescribedByParts = [];
+    if (hasInlineContent && fieldMessagesContainerId) {
+      ariaDescribedByParts.push(fieldMessagesContainerId);
+    }
+    if (state.showError && hasRoutedErrors && formMessagesContainerId) {
+      ariaDescribedByParts.push(formMessagesContainerId);
     }
+    const ariaDescribedBy = ariaDescribedByParts.length > 0 ? ariaDescribedByParts.join(" ") : void 0;
     return {
-      "aria-errormessage": state.showError ? errorMessageIdsString : void 0,
+      "aria-errormessage": activeErrorContainerId,
       "aria-invalid": state.showError,
-      "aria-describedby": messageIdsString
+      "aria-describedby": ariaDescribedBy
     };
-  }, [state.customMessages, state.formControlMessages, state.showError]);
+  }, [
+    routesAwayFromField,
+    formMessagesContainerId,
+    state.customMessages,
+    state.formControlMessages,
+    state.showError,
+    fieldMessagesContainerId
+  ]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
   return ariaProps;
 }
@@ -254,7 +281,7 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
   const updateErrorMessages = (0, import_react.useCallback)(() => {
     const errorType = getErrorType(ref.current?.validity);
     formControlMessagesRef.current.forEach((message) => {
-      if (message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
+      if (message.id === errorId && message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
         dispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
           payload: {

package/forms/forms-core/state/formfield-messages-state-reducer.js

@@ -129,7 +129,7 @@ function formFieldMessagesReducer(state, action) {
     ) && !state.customMessages.some(
       (message) => message.id === remainingPayload.id
     )) {
-      newState.customMessages.push(remainingPayload);
+      newState.customMessages = [...newState.customMessages, remainingPayload];
       if (payload.messageText !== void 0) {
         newState.customMessageTexts = {
           ...newState.customMessageTexts ?? {},

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-11-2 {
+@keyframes _yfwka31-3-12-0 {
 
 }
-@keyframes _yfwka32-3-11-2 {
+@keyframes _yfwka32-3-12-0 {
 
 }
-._yfwka33-3-11-2:-webkit-autofill:is(._yfwka33-3-11-2,:hover,:focus) {
+._yfwka33-3-12-0:-webkit-autofill:is(._yfwka33-3-12-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-11-2) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-12-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-11-2:-webkit-autofill {
-  animation-name: _yfwka31-3-11-2;
+._yfwka33-3-12-0:-webkit-autofill {
+  animation-name: _yfwka31-3-12-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-11-2:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-11-2;
+._yfwka33-3-12-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-12-0;
   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-11-2)";
-var autofillCSS = "_yfwka33-3-11-2";
-var end = "_yfwka32-3-11-2";
-var start = "_yfwka31-3-11-2";
+var autofillBackground = "var(--_yfwka30-3-12-0)";
+var autofillCSS = "_yfwka33-3-12-0";
+var end = "_yfwka32-3-12-0";
+var start = "_yfwka31-3-12-0";

package/forms/hooks/useContainerFocus.css

@@ -1,3 +1,3 @@
-._la3ex60-3-11-2:focus {
+._la3ex60-3-12-0:focus {
   outline: none;
 }

package/forms/hooks/useContainerFocus.sty.js

@@ -21,4 +21,4 @@ __export(useContainerFocus_css_exports, {
 });
 module.exports = __toCommonJS(useContainerFocus_css_exports);
 var import_useContainerFocus_css_ts_vanilla = require("./useContainerFocus.css");
-var containerRoot = "_la3ex60-3-11-2";
+var containerRoot = "_la3ex60-3-12-0";

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-11-2 {
+._h96idu0-3-12-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-11-2 {
+._h96idu1-3-12-0 {
   cursor: default;
 }
-._h96idu5-3-11-2 {
+._h96idu5-3-12-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-11-2._h96idu3-3-11-2 {
+._h96idu5-3-12-0._h96idu3-3-12-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-11-2 ._h96idu5-3-11-2 {
+._h96idu1-3-12-0 ._h96idu5-3-12-0 {
   cursor: default;
 }
-._h96idu6-3-11-2 {
+._h96idu6-3-12-0 {
   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-11-2);
+  background-color: var(--_bx32h3-3-12-0);
 }
-._h96idu7-3-11-2 {
+._h96idu7-3-12-0 {
   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-11-2 {
+._h96idue-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-11-2 {
+._h96idug-3-12-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-11-2 {
+._h96iduh-3-12-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-11-2 {
+._h96idui-3-12-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-11-2 {
+._h96iduj-3-12-0 {
   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-11-2 {
+._h96iduk-3-12-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-11-2);
+  fill: var(--_bx32h1-3-12-0);
 }
-._h96idu5-3-11-2:not(._h96idu4-3-11-2) ._h96iduk-3-11-2 {
+._h96idu5-3-12-0:not(._h96idu4-3-12-0) ._h96iduk-3-12-0 {
   display: none;
 }
-._h96idu1-3-11-2 ._h96iduk-3-11-2 {
+._h96idu1-3-12-0 ._h96iduk-3-12-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-11-2._h96idu1-3-11-2 ._h96iduk-3-11-2 {
+._h96idu2-3-12-0._h96idu1-3-12-0 ._h96iduk-3-12-0 {
   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-11-2";
-var disabled = "_h96idu3-3-11-2";
-var group = "_h96idu0-3-11-2";
-var hasError = "_h96idu2-3-11-2";
-var innerKnob = "_h96iduk-3-11-2";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-11-2", variantClassNames: { disabled: { true: "_h96idu7-3-11-2" }, checked: { true: "_h96idu8-3-11-2", false: "_h96idu9-3-11-2" }, hasError: { true: "_h96idua-3-11-2", false: "_h96idub-3-11-2" }, isFocusVisible: { true: "_h96iduc-3-11-2", false: "_h96idud-3-11-2" }, readOnly: { true: "_h96idue-3-11-2", false: "_h96iduf-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-11-2"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-11-2"], [{ readOnly: true, disabled: false }, "_h96idui-3-11-2"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-11-2"]] });
-var label = "_h96idu5-3-11-2";
-var readOnly = "_h96idu1-3-11-2";
+var checked = "_h96idu4-3-12-0";
+var disabled = "_h96idu3-3-12-0";
+var group = "_h96idu0-3-12-0";
+var hasError = "_h96idu2-3-12-0";
+var innerKnob = "_h96iduk-3-12-0";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-12-0", variantClassNames: { disabled: { true: "_h96idu7-3-12-0" }, checked: { true: "_h96idu8-3-12-0", false: "_h96idu9-3-12-0" }, hasError: { true: "_h96idua-3-12-0", false: "_h96idub-3-12-0" }, isFocusVisible: { true: "_h96iduc-3-12-0", false: "_h96idud-3-12-0" }, readOnly: { true: "_h96idue-3-12-0", false: "_h96iduf-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-12-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-12-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-12-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-12-0"]] });
+var label = "_h96idu5-3-12-0";
+var readOnly = "_h96idu1-3-12-0";

package/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-11-2 {
+._1mumub80-3-12-0 {
   min-width: 192px;
 }
-._1mumub81-3-11-2 {
+._1mumub81-3-12-0 {
   min-width: 272px;
 }

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

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-11-2", variantClassNames: { hasStepper: { true: "_1mumub81-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-12-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-11-2 {
+._s3yy5s0-3-12-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-11-2 {
+._s3yy5s1-3-12-0 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-11-2 {
+._s3yy5s2-3-12-0 {
   margin: 0;
 }
-._s3yy5s1-3-11-2 > ._s3yy5s2-3-11-2:first-child {
+._s3yy5s1-3-12-0 > ._s3yy5s2-3-12-0:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-11-2 > ._s3yy5s2-3-11-2:last-child {
+._s3yy5s1-3-12-0 > ._s3yy5s2-3-12-0:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/forms/search-input/Stepper.js

@@ -76,7 +76,14 @@ const Stepper = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "vertical", className: baseInputStyles.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Divider.Divider,
+      {
+        orientation: "vertical",
+        className: baseInputStyles.divider,
+        "aria-hidden": true
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.stepperButtons, role: "group", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.Button,

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

@@ -29,6 +29,6 @@ var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.
 var import_BaseInput_css_ts_vanilla = require("../_base-input/BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("../_base-input/BaseInputContent.css");
 var import_Stepper_css_ts_vanilla = require("./Stepper.css");
-var matchPositionIndicators = "_s3yy5s0-3-11-2 _o6rxr70-3-11-2 _da9a8v0-3-11-2 _da9a8v2-3-11-2 _da9a8v3-3-11-2 _da9a8vb-3-11-2";
-var stepperButton = "_s3yy5s2-3-11-2 _1a8lqy9e-3-11-2";
-var stepperButtons = "_s3yy5s1-3-11-2";
+var matchPositionIndicators = "_s3yy5s0-3-12-0 _o6rxr70-3-12-0 _da9a8v0-3-12-0 _da9a8v2-3-12-0 _da9a8v3-3-12-0 _da9a8vb-3-12-0";
+var stepperButton = "_s3yy5s2-3-12-0 _1a8lqy9e-3-12-0";
+var stepperButtons = "_s3yy5s1-3-12-0";

package/forms/select/Select.d.ts

@@ -1,4 +1,4 @@
-import { type FocusEvent, type PropsWithChildren, type Ref, type RefObject, type ReactNode, type ReactElement, type SetStateAction, type Dispatch } from 'react';
+import { type PropsWithChildren, type Ref, type RefObject, type ReactNode, type ReactElement, type SetStateAction, type Dispatch } from 'react';
 import { type GroupBase } from 'react-select';
 import type { MenuListFunctionRefObject } from './components/MenuList.js';
 import { SelectContent } from './SelectContent.js';
@@ -20,6 +20,7 @@ import type { FormControlState, FormControlStateProps } from '../../core/types/f
 import { MaskingProps } from '../../core/types/masking-props.js';
 import { StylingProps } from '../../core/types/styling-props.js';
 import type { FormControlRef, FormControlWithOverlayRef } from '../shared-types.js';
+import type { MessageTarget } from '../validation/message-routing.js';
 declare module 'react-select/dist/declarations/src/Select' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
         /** Custom placeholder text */
@@ -60,6 +61,7 @@ declare module 'react-select/dist/declarations/src/Select' {
         allOptions?: BaseOption<Option>[];
         hiddenSelectRef: Ref<HTMLSelectElement>;
         hiddenSelectName?: string;
+        hiddenSelectForm?: string;
         /** whether the focus styles on the options should be visible */
         focusOnOption: boolean;
         /** Ref that needs to be applied to the filter input to manage the focus and keyboard navigation */
@@ -68,6 +70,8 @@ declare module 'react-select/dist/declarations/src/Select' {
         clearSelectionRef?: RefObject<HTMLElement | null>;
         /** Ref that needs to be applied to the select content (menulist) element to manage the focus and keyboard navigation */
         contentRef?: RefObject<HTMLDivElement | null>;
+        /** Identifies the menu portal as part of the Select focus boundary. */
+        menuOwnerId: string;
         menuListFunctionRef?: RefObject<MenuListFunctionRefObject | null>;
         /** The content width set by the dev. */
         contentWidth?: SelectContentWidthOptionsType;
@@ -111,6 +115,12 @@ export type SelectBaseProps<T, Multiple extends boolean> = PropsWithChildren<{
     name?: string;
     /** Form name used to connect the component to a form */
     form?: string;
+    /**
+     * Internal: routes this control's native/Strato validation messages to the
+     * field outlet (default), the enclosing form's outlet, or both. Unstable.
+     * @internal
+     */
+    _messageTarget?: MessageTarget | MessageTarget[];
     /**
      * Boolean to determine whether the component is required
      *
@@ -137,10 +147,6 @@ export type SelectBaseProps<T, Multiple extends boolean> = PropsWithChildren<{
      * @defaultValue false for single select, true for multi select
      */
     clearable?: boolean;
-    /** Callback that is called when the select trigger loses focus. */
-    onBlur?: (e: FocusEvent<HTMLInputElement, Element>) => void;
-    /** Callback that is called when the select trigger gets focus. */
-    onFocus?: (e: FocusEvent<HTMLInputElement, Element>) => void;
 }> & MaskingProps;
 /**
  * @public
@@ -150,7 +156,7 @@ export type SelectOnChangeValue<OptionValue, Multiple extends boolean> = Multipl
  * Accepted properties for Select
  * @public
  */
-export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void, HTMLInputElement> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
+export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void, HTMLElement> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
 /**
  * The `Select` component allows you to choose one or multiple
  * options from a collapsed dropdown with options.