@dynatrace/strato-components 3.6.0 → 3.7.0

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

@@ -1,4 +1,4 @@
-import { type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
+import { type ClipboardEvent as ReactClipboardEvent, type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
 import type { DateTimeInputRef } from './types.js';
 /**
  * Hook that provides interaction handlers for selection behavior in date/time pickers.
@@ -8,11 +8,13 @@ import type { DateTimeInputRef } from './types.js';
  * @param onFocusInput - Callback to focus the appropriate input(s) when needed
  * @param dateInputFromRef - Reference to the "from" DateTimeInput imperative handle
  * @param dateInputToRef - Reference to the optional "to" DateTimeInput imperative handle
- * @returns Object containing onMouseDown and onKeyDown event handlers
+ * @returns Object containing onMouseDown, onKeyDown and onCutCapture event handlers
  *
  * @internal
  */
 export declare function useSelectionInteractionHandlers(touchedContainerRef: RefObject<HTMLElement>, onFocusInput: () => void, dateInputFromRef: RefObject<DateTimeInputRef>, dateInputToRef?: RefObject<DateTimeInputRef>): {
     onMouseDown: (event: ReactMouseEvent<HTMLDivElement>) => void;
     onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+    onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
+    onCutCapture: (event: ReactClipboardEvent<HTMLDivElement>) => void;
 };

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

@@ -28,11 +28,14 @@ function getInputRefs(dateInputFromRef, dateInputToRef) {
   return [dateInputFromRef, ...dateInputToRef ? [dateInputToRef] : []];
 }
 function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, dateInputFromRef, dateInputToRef) {
+  const contextMenuSelectionRef = (0, import_react.useRef)(null);
   const onMouseDown = (0, import_react.useCallback)(
     (event) => {
       if (event.button !== 0) {
         return;
       }
+      contextMenuSelectionRef.current = null;
+      (0, import_selection_helpers.consumePreRestoreEndpoints)(event.currentTarget);
       const root = event.currentTarget;
       const triggerElement = event.target;
       const clickedOnSpinButton = triggerElement instanceof HTMLElement && triggerElement.hasAttribute("contenteditable");
@@ -74,6 +77,69 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
     },
     [onFocusInput]
   );
+  const performCut = (0, import_react.useCallback)(
+    (selection, pickerRoot, shouldSetClipboard) => {
+      const inputRefs = getInputRefs(dateInputFromRef, dateInputToRef);
+      if (shouldSetClipboard) {
+        const clipboardText = (0, import_selection_copy_helpers.buildTimeframeClipboardText)();
+        if (clipboardText !== null) {
+          navigator.clipboard.writeText(clipboardText).catch(() => {
+          });
+        }
+      }
+      const partialExpressionElement = (0, import_selection_helpers.getPartialExpressionElement)(
+        selection,
+        inputRefs
+      );
+      if (partialExpressionElement) {
+        (0, import_selection_helpers.deletePartialExpression)(selection, partialExpressionElement);
+        return;
+      }
+      const crossExpressionElements = (0, import_selection_helpers.getCrossExpressionElements)(
+        selection,
+        inputRefs
+      );
+      const plan = (0, import_selection_helpers.planBulkClear)(
+        selection,
+        inputRefs,
+        (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
+      );
+      if (crossExpressionElements) {
+        const boundaryExpressionRef = crossExpressionElements[0] === crossExpressionElements[1] ? inputRefs.find(
+          (inputRef) => inputRef.current?.expressionInputRef === crossExpressionElements[0]
+        ) : void 0;
+        (0, import_selection_helpers.deleteCrossExpressionPartial)(selection, crossExpressionElements);
+        for (const { inputRef, key } of plan.snapshot) {
+          inputRef.current?.spinButtonHandlers.get(key)?.clearValue(true);
+        }
+        for (const [inputRef, text] of plan.expressionFallbacks) {
+          if (inputRef !== boundaryExpressionRef) {
+            inputRef.current?.setExpressionValue(text);
+          }
+        }
+      } else {
+        for (const { inputRef, key } of plan.snapshot) {
+          inputRef.current?.spinButtonHandlers.get(key)?.clearValue(true);
+        }
+        for (const [inputRef, text] of plan.expressionFallbacks) {
+          inputRef.current?.setExpressionValue(text);
+        }
+        for (const ref of plan.affectedExpressionRefs) {
+          ref.current?.setExpressionValue("");
+        }
+        selection.removeAllRanges();
+      }
+      (0, import_selection_helpers.restoreFocusAfterBulkClear)(
+        (0, import_selection_helpers.getFirstSnapshotHandler)(plan.snapshot),
+        (0, import_selection_helpers.findFirstExpressionFocusTarget)(
+          inputRefs,
+          plan.affectedExpressionRefs,
+          plan.expressionFallbacks
+        )
+      );
+    },
+    [dateInputFromRef, dateInputToRef]
+  );
   const onKeyDown = (0, import_react.useCallback)(
     (event) => {
       const hasModifierKey = event.metaKey === true || event.ctrlKey === true;
@@ -97,50 +163,8 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
       }
       function bulkClear(selection, direction2) {
         const inputRefs = getInputRefs(dateInputFromRef, dateInputToRef);
-        const partialExpressionElement = (0, import_selection_helpers.getPartialExpressionElement)(
-          selection,
-          inputRefs
-        );
-        if (partialExpressionElement) {
-          onBeforeExpressionDelete([partialExpressionElement], inputRefs);
-          (0, import_selection_helpers.deletePartialExpression)(selection, partialExpressionElement);
-          return;
-        }
-        const crossExpressionElements = (0, import_selection_helpers.getCrossExpressionElements)(
-          selection,
-          inputRefs
-        );
-        if (crossExpressionElements) {
-          const isSameExpressionSelection = crossExpressionElements[0] === crossExpressionElements[1];
-          const expressionElementsForUndo = isSameExpressionSelection ? [crossExpressionElements[0]] : crossExpressionElements;
-          onBeforeExpressionDelete(expressionElementsForUndo, inputRefs);
-          const boundaryExpressionRef = isSameExpressionSelection ? inputRefs.find(
-            (inputRef) => inputRef.current?.expressionInputRef === crossExpressionElements[0]
-          ) : void 0;
-          const plan2 = (0, import_selection_helpers.planBulkClear)(
-            selection,
-            inputRefs,
-            (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
-          );
-          const firstSpinButtonHandler = (0, import_selection_helpers.getFirstSnapshotHandler)(plan2.snapshot);
-          const expressionFocusTarget2 = (0, import_selection_helpers.findFirstExpressionFocusTarget)(
-            inputRefs,
-            plan2.affectedExpressionRefs,
-            plan2.expressionFallbacks
-          );
-          (0, import_selection_helpers.deleteCrossExpressionPartial)(selection, crossExpressionElements);
-          for (const { inputRef, key } of plan2.snapshot) {
-            inputRef.current?.spinButtonHandlers.get(key)?.clearValue(true);
-          }
-          for (const [inputRef, text] of plan2.expressionFallbacks) {
-            if (inputRef !== boundaryExpressionRef) {
-              inputRef.current?.setExpressionValue(text);
-            }
-          }
-          (0, import_selection_helpers.restoreFocusAfterBulkClear)(
-            firstSpinButtonHandler,
-            expressionFocusTarget2
-          );
+        if ((0, import_selection_helpers.getPartialExpressionElement)(selection, inputRefs) !== null || (0, import_selection_helpers.getCrossExpressionElements)(selection, inputRefs) !== null) {
+          performCut(selection, pickerRoot, false);
           return;
         }
         const plan = (0, import_selection_helpers.planBulkClear)(
@@ -160,24 +184,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
           expressionFocusTarget
         );
       }
-      function onBeforeExpressionDelete(expressionElements, inputRefs) {
-        const expressionSnapshots = [];
-        for (const exprEl of expressionElements) {
-          let matchingRef;
-          for (const inputRef of inputRefs) {
-            if (inputRef.current?.expressionInputRef === exprEl) {
-              matchingRef = inputRef;
-              break;
-            }
-          }
-          if (matchingRef) {
-            expressionSnapshots.push({
-              inputRef: matchingRef,
-              previousText: matchingRef.current?.inputRef?.value ?? exprEl.textContent ?? ""
-            });
-          }
-        }
-      }
       if (hasModifierKey && event.key === "a") {
         event.preventDefault();
         if (event.currentTarget instanceof HTMLElement) {
@@ -194,18 +200,15 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
       }
       const isCut = hasModifierKey && event.key === "x";
       const isDelete = event.key === "Backspace" || event.key === "Delete";
-      const direction = isCut || event.key === "Backspace" ? "backward" : "forward";
+      const direction = event.key === "Backspace" ? "backward" : "forward";
       if (isCut || isDelete) {
         const selection = window.getSelection();
         if (selection && !selection.isCollapsed) {
           event.preventDefault();
-          const clipboardText = (0, import_selection_copy_helpers.buildTimeframeClipboardText)();
-          bulkClear(selection, direction);
           if (isCut) {
-            if (clipboardText !== null) {
-              navigator.clipboard.writeText(clipboardText).catch(() => {
-              });
-            }
+            performCut(selection, pickerRoot, true);
+          } else {
+            bulkClear(selection, direction);
           }
           return;
         }
@@ -292,9 +295,49 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
         }
       }
     },
-    [onFocusInput, touchedContainerRef, dateInputFromRef, dateInputToRef]
+    [
+      onFocusInput,
+      touchedContainerRef,
+      dateInputFromRef,
+      dateInputToRef,
+      performCut
+    ]
+  );
+  const onContextMenu = (0, import_react.useCallback)(
+    (event) => {
+      (0, import_selection_helpers.consumePreRestoreEndpoints)(event.currentTarget);
+      const selection = window.getSelection();
+      contextMenuSelectionRef.current = selection && !selection.isCollapsed && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    },
+    []
+  );
+  const onCutCapture = (0, import_react.useCallback)(
+    (event) => {
+      const savedRange = contextMenuSelectionRef.current;
+      contextMenuSelectionRef.current = null;
+      if (savedRange) {
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(savedRange);
+        }
+      }
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed) {
+        return;
+      }
+      event.preventDefault();
+      const pickerRoot = event.currentTarget;
+      performCut(selection, pickerRoot, true);
+      for (const el of pickerRoot.querySelectorAll(
+        "[data-drag-selected]"
+      )) {
+        el.removeAttribute("data-drag-selected");
+      }
+    },
+    [performCut]
   );
-  return { onMouseDown, onKeyDown };
+  return { onMouseDown, onKeyDown, onContextMenu, onCutCapture };
 }
 function getAnchorSpinButton() {
   const anchorNode = window.getSelection()?.anchorNode ?? null;

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

@@ -1,4 +1,4 @@
-._1dphm0f0-3-6-0 {
+._1dphm0f0-3-7-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-6-0 {
+._1dphm0f1-3-7-0 {
   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-6-0";
-var legend = "_1dphm0f1-3-6-0";
+var fieldset = "_1dphm0f0-3-7-0";
+var legend = "_1dphm0f1-3-7-0";

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-6-0";
+var formField = "_mvcxum0-3-7-0";

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

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

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

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

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

package/forms/forms-core/time/helpers.js

@@ -79,7 +79,7 @@ function sortTimeframeValues(value, min, max, precision) {
         value.to.value,
         value.from.value,
         "from",
-        value.from.type === "expression",
+        value.to.type === "expression",
         min,
         max,
         precision
@@ -88,7 +88,7 @@ function sortTimeframeValues(value, min, max, precision) {
         value.from.value,
         value.to.value,
         "to",
-        value.to.type === "expression",
+        value.from.type === "expression",
         min,
         max,
         precision
@@ -275,7 +275,7 @@ function _getPreciseIsoString(isoString, timeOffset, position, isExpression) {
       }
       const parsedOffsetDate = (0, import_units.parseTimeAsTimeValue)(offsetDate);
       if (parsedOffsetDate?.type === "expression") {
-        return parsedOffsetDate.absoluteDate;
+        return isoString;
       }
       const precision = (0, import_date_time.getSecondFractions)(offsetDate);
       return (0, import_date_time.applyInitialTime)(isoString, offsetDate, precision);

package/forms/hooks/useAutofillEvent.css

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

package/forms/number-input/NumberInputBase.js

@@ -39,8 +39,8 @@ var import_react_intl = require("react-intl");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
+var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
-var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
@@ -91,7 +91,7 @@ const NumberInputBase = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   const locale = (0, import_react.useMemo)(() => (0, import_helpers.getSafeRegionalFormat)(), []);
   const minValue = !isNaN(Number(minValueNumberLike)) ? Number(minValueNumberLike) : void 0;
   const maxValue = !isNaN(Number(maxValueNumberLike)) ? Number(maxValueNumberLike) : void 0;
-  const numberInputValue = value === null || value === void 0 ? NaN : value;
+  const numberInputValue = value ?? NaN;
   const {
     disabled,
     required,

package/forms/radio/Radio.js

@@ -37,8 +37,8 @@ var import_RadioGroupContext = require("./RadioGroupContext.js");
 var styles = __toESM(require("./styles.sty.js"));
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
+var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useId = require("../../core/hooks/useId.js");
-var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_is_node_environment = require("../../core/utils/is-node-environment.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_field_css = require("../../styles/field.sty.js");

package/forms/radio/styles.css

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

package/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-6-0 {
+._1mumub80-3-7-0 {
   min-width: 192px;
 }
-._1mumub81-3-6-0 {
+._1mumub81-3-7-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-6-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-7-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

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

package/forms/search-input/Stepper.js

@@ -54,12 +54,12 @@ const Stepper = ({
       `The current match index (${current}) is greater than the total number of matches (${total}). Please ensure that the current index is zero-based and less than the total.`
     );
   }
+  const currentDisplay = total === 0 ? 0 : current + 1;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
+      "output",
       {
         className: styles.matchPositionIndicators,
-        role: "status",
         "aria-live": "polite",
         "aria-label": intl.formatMessage(
           {
@@ -67,10 +67,10 @@ const Stepper = ({
             defaultMessage: "Match {current} of {total}",
             description: "Label for the current match position"
           },
-          { current: current + 1, total }
+          { current: currentDisplay, total }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: current + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: currentDisplay }),
           " / ",
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: total })
         ]