@dynatrace/strato-components 3.11.3 → 3.12.0

package/forms/calendar/Calendar.sty.js

@@ -33,15 +33,15 @@ __export(Calendar_css_exports, {
 module.exports = __toCommonJS(Calendar_css_exports);
 var import_Calendar_css_ts_vanilla = require("./Calendar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var body = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-11-3", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var calendar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-11-3", variantClassNames: { readOnly: { true: "_xm8mdk1-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var clearBackground = "_xm8mdkm-3-11-3";
-var dayRow = "_xm8mdk6-3-11-3";
-var disabled = "_xm8mdk2-3-11-3";
-var field = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-11-3", variantClassNames: { color: { primary: "_xm8mdka-3-11-3", neutral: "_xm8mdkb-3-11-3", critical: "_xm8mdkc-3-11-3" }, isIncompleteSelection: { true: "_xm8mdkd-3-11-3" }, isDisabled: { true: "_xm8mdke-3-11-3" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-11-3"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-11-3"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-11-3"]] });
-var footer = "_xm8mdko-3-11-3";
-var monthRow = "_xm8mdk7-3-11-3";
-var rangeField = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-11-3", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-11-3", last: "_xm8mdkk-3-11-3", inbetween: "_xm8mdkl-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var row = "_xm8mdk5-3-11-3";
-var weekdays = "_xm8mdkn-3-11-3";
-var yearRow = "_xm8mdk8-3-11-3";
+var body = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-12-0", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var calendar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-12-0", variantClassNames: { readOnly: { true: "_xm8mdk1-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var clearBackground = "_xm8mdkm-3-12-0";
+var dayRow = "_xm8mdk6-3-12-0";
+var disabled = "_xm8mdk2-3-12-0";
+var field = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-12-0", variantClassNames: { color: { primary: "_xm8mdka-3-12-0", neutral: "_xm8mdkb-3-12-0", critical: "_xm8mdkc-3-12-0" }, isIncompleteSelection: { true: "_xm8mdkd-3-12-0" }, isDisabled: { true: "_xm8mdke-3-12-0" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-12-0"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-12-0"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-12-0"]] });
+var footer = "_xm8mdko-3-12-0";
+var monthRow = "_xm8mdk7-3-12-0";
+var rangeField = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-12-0", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-12-0", last: "_xm8mdkk-3-12-0", inbetween: "_xm8mdkl-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var row = "_xm8mdk5-3-12-0";
+var weekdays = "_xm8mdkn-3-12-0";
+var yearRow = "_xm8mdk8-3-12-0";

package/forms/calendar/Calendar.types.d.ts

@@ -7,6 +7,7 @@ import type { FormControlProps } from '../../core/types/form-control-props.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { Timeframe } from '../../core/types/time.js';
+import type { MessageTarget } from '../validation/message-routing.js';
 /** @internal */
 export type CalendarValueType<Type extends CalendarType> = Type extends 'range' ? RequireAtLeastOne<Timeframe> | RequireAtLeastOne<{
     from: string;
@@ -29,6 +30,18 @@ export type CalendarProps<Type extends CalendarType> = FormControlProps<Calendar
      * @defaultValue 'minutes'
      */
     precision?: 'minutes' | 'seconds' | 'milliseconds';
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _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[];
 };
 /** @internal */
 export interface SelectMonthViewItems {

package/forms/calendar/CalendarRoot.d.ts

@@ -1,9 +1,10 @@
 import type { CalendarStrictValueType, CalendarValueType } from './Calendar.types.js';
+import { MaskingProps } from '../../core/types/masking-props.js';
+import { StylingProps } from '../../core/types/styling-props.js';
 import type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';
 import { DataTestId } from '../../core/types/data-props.js';
 import type { FormControlProps } from '../../core/types/form-control-props.js';
-import { MaskingProps } from '../../core/types/masking-props.js';
-import { StylingProps } from '../../core/types/styling-props.js';
+import type { MessageTarget } from '../validation/message-routing.js';
 /**
  * @internal
  */
@@ -23,6 +24,18 @@ export type CalendarProps<Type extends CalendarType> = FormControlProps<Calendar
      * @defaultValue 'minutes'
      */
     precision?: 'minutes' | 'seconds' | 'milliseconds';
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _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[];
 };
 /**
  * Calendar component

package/forms/calendar/CalendarRoot.js

@@ -37,10 +37,13 @@ var import_react_intl = require("react-intl");
 var import_CalendarHeader = require("./calendar-header/CalendarHeader.js");
 var styles = __toESM(require("./Calendar.sty.js"));
 var import_calendarMessages = require("./calendarMessages.js");
+var import_useInternalFormRegistration = require("../form/hooks/useInternalFormRegistration.js");
 var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 var import_SetTimeToNowButton = require("./components/SetTimeToNowButton.js");
 var import_CalendarContext = require("./contexts/CalendarContext.js");
 var import_useCalendar = require("./hooks/useCalendar.js");
+var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_useContainerFocus = require("../hooks/useContainerFocus.js");
 var import_useCalendarNavigation = require("./hooks/useCalendarNavigation.js");
 var import_SelectDayView = require("./views/SelectDayView.js");
@@ -50,8 +53,6 @@ var import_VisuallyHidden = require("../../core/components/visually-hidden/Visua
 var import_helpers = require("../../core/time/helpers.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
 var import_validation = require("../../core/time/validation.js");
-var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
-var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
 const COMPONENT_NAME = "Calendar";
@@ -75,6 +76,8 @@ function CalendarComponent(props, forwardedRef) {
     "aria-disabled": ariaDisabled,
     required,
     name,
+    _form,
+    _messageTarget,
     readOnly = false,
     // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
     // @ts-ignore Strict mode transition - needs to be investigated
@@ -98,7 +101,10 @@ function CalendarComponent(props, forwardedRef) {
   const headerRef = (0, import_react.useRef)(null);
   const ref = (0, import_react.useRef)(null);
   const refTo = (0, import_react.useRef)(null);
-  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const formValidityChangeRef = (0, import_react.useRef)(void 0);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+    (state2) => formValidityChangeRef.current?.(state2)
+  );
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
     () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual")
@@ -111,7 +117,11 @@ function CalendarComponent(props, forwardedRef) {
     view: state.currentView,
     dispatch
   });
-  const { dispatch: formMessageDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const { dispatch: formMessageDispatch, state: formFieldMessagesState } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const customMessagesRef = (0, import_react.useRef)(
+    formFieldMessagesState?.customMessages ?? []
+  );
+  customMessagesRef.current = formFieldMessagesState?.customMessages ?? [];
   const refValidate = (0, import_react.useCallback)(() => {
     formMessageDispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -127,6 +137,76 @@ function CalendarComponent(props, forwardedRef) {
       errorMessages: import_calendarMessages.CALENDAR_ERROR_MESSAGES
     });
   }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);
+  const validateField = (0, import_react.useCallback)(
+    async ({
+      reveal,
+      trigger
+    }) => {
+      if (reveal) {
+        formMessageDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        (0, import_validation.validate)(calendarValue, min, max, {
+          formMessageDispatch,
+          formerError: error,
+          precision,
+          showError: true,
+          checkOrder: false,
+          ref,
+          errorMessages: import_calendarMessages.CALENDAR_ERROR_MESSAGES
+        });
+      }
+      if ((0, import_helpers.isTimeValue)(calendarValue)) {
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, trigger)
+        );
+      }
+      const fromState = (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, trigger);
+      if (fromState.errors.length > 0) {
+        return emitValidationState(fromState);
+      }
+      return emitValidationState(
+        (0, import_useFormFieldValidation.getI18nValidationState)(intl, refTo.current, trigger)
+      );
+    },
+    [
+      formMessageDispatch,
+      calendarValue,
+      min,
+      max,
+      error,
+      precision,
+      emitValidationState,
+      intl,
+      ref,
+      refTo
+    ]
+  );
+  const resetValidation = (0, import_react.useCallback)(() => {
+    formMessageDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: false }
+    });
+    for (const msg of customMessagesRef.current) {
+      formMessageDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: msg.id, messageType: "custom" }
+      });
+    }
+  }, [formMessageDispatch]);
+  const formRegistration = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    onValidityChange,
+    getValue: () => calendarValue,
+    focus: () => headerRef.current?.focus(),
+    validateField,
+    resetValidation
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => {
@@ -211,7 +291,8 @@ function CalendarComponent(props, forwardedRef) {
     disabled,
     "aria-disabled": ariaDisabled,
     name: name && `${name}${suffix}`,
-    id
+    id,
+    form: _form
   });
   const calenderContextValue = (0, import_react.useMemo)(
     () => ({ state, dispatch, readOnly }),

package/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-11-3 {
+._1basjc0-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-11-3::after,._1basjc1-3-11-3::before {
+._1basjc1-3-12-0::after,._1basjc1-3-12-0::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-11-3::before {
+._1basjc1-3-12-0::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-11-3 {
+._1basjc2-3-12-0 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-11-3::after {
-  background: var(--_1jljrbf1-3-11-3);
+._1basjc2-3-12-0::after {
+  background: var(--_1jljrbf1-3-12-0);
 }
-._1basjc3-3-11-3 {
+._1basjc3-3-12-0 {
   flex-grow: 1;
 }

package/forms/calendar/components/CalendarItem.sty.js

@@ -24,7 +24,7 @@ __export(CalendarItem_css_exports, {
 });
 module.exports = __toCommonJS(CalendarItem_css_exports);
 var import_CalendarItem_css_ts_vanilla = require("./CalendarItem.css");
-var calendarButton = "_1basjc2-3-11-3";
-var currentIndicator = "_1basjc1-3-11-3";
-var headerButton = "_1basjc3-3-11-3";
-var outOfScopeDay = "_1basjc0-3-11-3";
+var calendarButton = "_1basjc2-3-12-0";
+var currentIndicator = "_1basjc1-3-12-0";
+var headerButton = "_1basjc3-3-12-0";
+var outOfScopeDay = "_1basjc0-3-12-0";

package/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-11-3 {
+._1uazq660-3-12-0 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-11-3);
+  fill: var(--_1jljrbf1-3-12-0);
 }
-._1uazq661-3-11-3 {
-  fill: var(--_1jljrbf1-3-11-3);
+._1uazq661-3-12-0 {
+  fill: var(--_1jljrbf1-3-12-0);
 }
-._1uazq662-3-11-3 {
+._1uazq662-3-12-0 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-11-3 {
-  fill: var(--_1jljrbf0-3-11-3);
+._1uazq663-3-12-0 {
+  fill: var(--_1jljrbf0-3-12-0);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-11-3 {
+._1uazq664-3-12-0 {
   opacity: 1;
 }

package/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -25,8 +25,8 @@ __export(CalendarOutlineIcon_css_exports, {
 });
 module.exports = __toCommonJS(CalendarOutlineIcon_css_exports);
 var import_CalendarOutlineIcon_css_ts_vanilla = require("./CalendarOutlineIcon.css");
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-11-3";
-var calendarIndicatorCSS = "_1uazq661-3-11-3";
-var calendarOutlineCSS = "_1uazq660-3-11-3";
-var calendarRangeCornersCSS = "_1uazq663-3-11-3";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-11-3";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-12-0";
+var calendarIndicatorCSS = "_1uazq661-3-12-0";
+var calendarOutlineCSS = "_1uazq660-3-12-0";
+var calendarRangeCornersCSS = "_1uazq663-3-12-0";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-12-0";

package/forms/calendar/variables.sty.js

@@ -21,5 +21,5 @@ __export(variables_css_exports, {
   rangeColor: () => rangeColor
 });
 module.exports = __toCommonJS(variables_css_exports);
-var borderColor = "var(--_1jljrbf1-3-11-3)";
-var rangeColor = "var(--_1jljrbf0-3-11-3)";
+var borderColor = "var(--_1jljrbf1-3-12-0)";
+var rangeColor = "var(--_1jljrbf0-3-12-0)";

package/forms/checkbox/Checkbox.css

@@ -1,67 +1,67 @@
-._qmw7sp0-3-11-3 {
+._qmw7sp0-3-12-0 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-11-3 {
+._qmw7sp1-3-12-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-11-3:after {
+._qmw7sp2-3-12-0:after {
   content: "*";
 }
-._qmw7sp3-3-11-3 {
+._qmw7sp3-3-12-0 {
   cursor: default;
 }
-._qmw7sp4-3-11-3 {
+._qmw7sp4-3-12-0 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-11-3);
+  background-color: var(--_bx32h3-3-12-0);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-11-3 {
+._qmw7sp5-3-12-0 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-11-3 {
+._qmw7sp6-3-12-0 {
   margin-right: 0;
 }
-._qmw7spg-3-11-3 {
+._qmw7spg-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._qmw7spg-3-11-3:not(:has(:focus-visible)) {
+._qmw7spg-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._qmw7sph-3-11-3 {
+._qmw7sph-3-12-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._qmw7sph-3-11-3:not(:has(:focus-visible)) {
+._qmw7sph-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spi-3-11-3:not(:has(:focus-visible)) {
+._qmw7spi-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7spj-3-11-3:not(:has(:focus-visible)) {
+._qmw7spj-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spk-3-11-3:not(:has(:focus-visible)) {
+._qmw7spk-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spl-3-11-3:not(:has(:focus-visible)) {
+._qmw7spl-3-12-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spm-3-11-3 {
+._qmw7spm-3-12-0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-11-3);
+  color: var(--_bx32h1-3-12-0);
 }
-._qmw7spn-3-11-3 {
+._qmw7spn-3-12-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._qmw7spp-3-11-3 {
+._qmw7spp-3-12-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/checkbox/Checkbox.js

@@ -205,9 +205,9 @@ const Checkbox = (0, import_react.forwardRef)(
     });
     (0, import_react.useEffect)(() => {
       if (inputRef.current) {
-        inputRef.current.indeterminate = value === "indeterminate";
+        inputRef.current.indeterminate = state === "indeterminate";
       }
-    }, [value]);
+    }, [state]);
     let fieldColorVariant = "default";
     if (state === true || state === "indeterminate") {
       fieldColorVariant = "accent";
@@ -278,7 +278,6 @@ const Checkbox = (0, import_react.forwardRef)(
                           id,
                           ref: inputRef,
                           type: "checkbox",
-                          "aria-checked": state === "indeterminate" ? "mixed" : state,
                           "aria-required": required,
                           "aria-disabled": ariaDisabled,
                           readOnly,

package/forms/checkbox/Checkbox.sty.js

@@ -26,6 +26,6 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Checkbox_css_ts_vanilla = require("./Checkbox.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checkboxIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7spm-3-11-3", variantClassNames: { readOnly: { true: "_qmw7spn-3-11-3" }, hasError: { true: "_qmw7spo-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-11-3"]] });
-var checkboxKnobCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp4-3-11-3", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-11-3", false: "_qmw7sp6-3-11-3" }, disabled: { true: "_qmw7sp7-3-11-3", false: "_qmw7sp8-3-11-3" }, hasError: { true: "_qmw7sp9-3-11-3", false: "_qmw7spa-3-11-3" }, checked: { true: "_qmw7spb-3-11-3", false: "_qmw7spc-3-11-3", indeterminate: "_qmw7spd-3-11-3", undefined: "_qmw7spe-3-11-3" }, readOnly: { true: "_qmw7spf-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-11-3"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-11-3"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-11-3"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-11-3"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-11-3"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-11-3"]] });
-var checkboxLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp0-3-11-3", variantClassNames: { disabled: { true: "_qmw7sp1-3-11-3" }, required: { true: "_qmw7sp2-3-11-3" }, readOnly: { true: "_qmw7sp3-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7spm-3-12-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-12-0" }, hasError: { true: "_qmw7spo-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-12-0"]] });
+var checkboxKnobCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp4-3-12-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-12-0", false: "_qmw7sp6-3-12-0" }, disabled: { true: "_qmw7sp7-3-12-0", false: "_qmw7sp8-3-12-0" }, hasError: { true: "_qmw7sp9-3-12-0", false: "_qmw7spa-3-12-0" }, checked: { true: "_qmw7spb-3-12-0", false: "_qmw7spc-3-12-0", indeterminate: "_qmw7spd-3-12-0", undefined: "_qmw7spe-3-12-0" }, readOnly: { true: "_qmw7spf-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-12-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-12-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-12-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-12-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-12-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-12-0"]] });
+var checkboxLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp0-3-12-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-12-0" }, required: { true: "_qmw7sp2-3-12-0" }, readOnly: { true: "_qmw7sp3-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/date-time-picker/DateTimePicker.css

@@ -1,85 +1,85 @@
-._1i883gj4-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj3-3-11-3: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj4-3-12-0 {
+  --_1i883gj0-3-12-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-12-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-12-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj3-3-12-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj5-3-11-3 {
+._1i883gj5-3-12-0 {
   cursor: default;
 }
-._1i883gj6-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj3-3-11-3: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj6-3-12-0 {
+  --_1i883gj0-3-12-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-12-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-12-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj3-3-12-0: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj7-3-11-3 {
-  --_1i883gj0-3-11-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-11-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-11-3: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+._1i883gj7-3-12-0 {
+  --_1i883gj0-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-12-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-12-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   cursor: not-allowed;
 }
-._1i883gj9-3-11-3 {
+._1i883gj9-3-12-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjb-3-11-3 {
+._1i883gjb-3-12-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-11-3);
+  color: var(--_1i883gj1-3-12-0);
   white-space-collapse: preserve;
 }
-._1i883gjc-3-11-3 {
+._1i883gjc-3-12-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3 {
-  color: var(--_1i883gj0-3-11-3);
+._r47o0w0-3-12-0 ._r47o0w1-3-12-0 {
+  color: var(--_1i883gj0-3-12-0);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3::before {
-  color: var(--_1i883gj1-3-11-3);
+._r47o0w0-3-12-0 ._r47o0w1-3-12-0::before {
+  color: var(--_1i883gj1-3-12-0);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus {
-  background-color: var(--_1i883gj3-3-11-3);
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-0 ._r47o0w1-3-12-0:focus {
+  background-color: var(--_1i883gj3-3-12-0);
+  color: var(--_1i883gj2-3-12-0);
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus::before {
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-0 ._r47o0w1-3-12-0:focus::before {
+  color: var(--_1i883gj2-3-12-0);
 }
-._r47o0w0-3-11-3 *::selection {
+._r47o0w0-3-12-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus::selection, ._r47o0w0-3-11-3 ._r47o0w1-3-11-3:focus *::selection {
+._r47o0w0-3-12-0 ._r47o0w1-3-12-0:focus::selection, ._r47o0w0-3-12-0 ._r47o0w1-3-12-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj2-3-11-3);
+  color: var(--_1i883gj2-3-12-0);
 }
-._r47o0w0-3-11-3 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-11-3[data-drag-selected]::before {
-  background-color: var(--_1i883gj3-3-11-3);
-  color: var(--_1i883gj2-3-11-3);
+._r47o0w0-3-12-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-12-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj3-3-12-0);
+  color: var(--_1i883gj2-3-12-0);
 }
-._r47o0w0-3-11-3 [data-drag-selected]::selection, ._r47o0w0-3-11-3 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-12-0 [data-drag-selected]::selection, ._r47o0w0-3-12-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-11-3:focus {
+[data-shift-selection=true] ._r47o0w1-3-12-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-11-3);
+  color: var(--_1i883gj0-3-12-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-11-3:focus::before {
-  color: var(--_1i883gj1-3-11-3);
+[data-shift-selection=true] ._r47o0w1-3-12-0:focus::before {
+  color: var(--_1i883gj1-3-12-0);
 }
-._1i883gjd-3-11-3 {
+._1i883gjd-3-12-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjd-3-11-3:is(button._1i883gjd-3-11-3._1i883gjd-3-11-3) {
+._1i883gjd-3-12-0:is(button._1i883gjd-3-12-0._1i883gjd-3-12-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-11-3 ._1i883gjd-3-11-3._1i883gjd-3-11-3._1i883gjd-3-11-3 {
+._1jgl8s50-3-12-0 ._1i883gjd-3-12-0._1i883gjd-3-12-0._1i883gjd-3-12-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

package/forms/date-time-picker/DateTimePicker.sty.js

@@ -30,9 +30,9 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css");
 var import_DateTimePicker_css_ts_vanilla = require("./DateTimePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearIconButton = "_1i883gjd-3-11-3";
-var dateSelector = "_1i883gjc-3-11-3";
-var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj4-3-11-3", variantClassNames: { readOnly: { true: "_1i883gj5-3-11-3" }, showError: { true: "_1i883gj6-3-11-3" }, disabled: { true: "_1i883gj7-3-11-3" }, type: { date: "_1i883gj8-3-11-3", time: "_1i883gj9-3-11-3", datetime: "_1i883gja-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var spinButtonGroup = "_1i883gjb-3-11-3 _da9a8v0-3-11-3 _da9a8v2-3-11-3 _da9a8v3-3-11-3 _da9a8vb-3-11-3";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-11-3)";
-var spinButtonSelectionColorVar = "var(--_1i883gj2-3-11-3)";
+var clearIconButton = "_1i883gjd-3-12-0";
+var dateSelector = "_1i883gjc-3-12-0";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj4-3-12-0", variantClassNames: { readOnly: { true: "_1i883gj5-3-12-0" }, showError: { true: "_1i883gj6-3-12-0" }, disabled: { true: "_1i883gj7-3-12-0" }, type: { date: "_1i883gj8-3-12-0", time: "_1i883gj9-3-12-0", datetime: "_1i883gja-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjb-3-12-0 _da9a8v0-3-12-0 _da9a8v2-3-12-0 _da9a8v3-3-12-0 _da9a8vb-3-12-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-12-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj2-3-12-0)";