@dynatrace/strato-components 3.10.1 → 3.11.0

package/core/styles/virtualFocus.sty.js

@@ -21,4 +21,4 @@ __export(virtualFocus_css_exports, {
 });
 module.exports = __toCommonJS(virtualFocus_css_exports);
 var import_virtualFocus_css_ts_vanilla = require("./virtualFocus.css");
-var virtualFocus = { neutral: "_9mvxlq0-3-10-1", primary: "_9mvxlq1-3-10-1" };
+var virtualFocus = { neutral: "_9mvxlq0-3-11-0", primary: "_9mvxlq1-3-11-0" };

package/core/time/helpers.d.ts

@@ -52,7 +52,7 @@ export declare function getFormattedTimeValue(timeValue: TimeValue | null, preci
  * Gets the formatted min and max values that are used in the translated messages.
  * @internal
  */
-export declare function getFormattedMinMax(min?: string, max?: string, precision?: Precision): {
+export declare function getFormattedMinMax(min?: TimeValue | null, max?: TimeValue | null, precision?: Precision): {
     min: string;
     max: string;
 };

package/core/time/helpers.js

@@ -108,24 +108,32 @@ function getFormattedTimeValue(timeValue, precision, showTimeOnly) {
   const absoluteDate = timeValue.absoluteDate ? new import_tz.TZDateMini(timeValue.absoluteDate, timezone) : null;
   return absoluteDate && (0, import_date_fns.isValid)(absoluteDate) ? (0, import_units.formatDate)(absoluteDate, formatOptions) : "";
 }
+function formatExpressionValue(tv) {
+  return isNowTimeValue(tv) ? '"Now"' : tv.value.replaceAll("now()", "").replaceAll("now", "").trim() || tv.value;
+}
+function toTimeValue(limit, relativeNow) {
+  if (typeof limit !== "string") {
+    return limit ?? null;
+  }
+  return limit ? (0, import_units.parseTimeAsTimeValue)(limit, relativeNow) : null;
+}
 function getFormattedMinMax(min, max, precision) {
   const relativeNow = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
-  const minDate = min ? (0, import_units.parseTimeAsTimeValue)(min, relativeNow) : null;
-  const maxDate = max ? (0, import_units.parseTimeAsTimeValue)(max, relativeNow) : null;
+  const minDate = toTimeValue(min, relativeNow);
+  const maxDate = toTimeValue(max, relativeNow);
   const newMinDate = new import_tz.TZDateMini(minDate?.absoluteDate ?? "", (0, import_user_preferences.getTimezone)());
-  if (!isNaN(newMinDate.getTime())) {
+  const isMinDateValid = !Number.isNaN(newMinDate.getTime());
+  if (minDate?.type !== "expression" && isMinDateValid) {
     if (precision === "seconds" && newMinDate.getMilliseconds() > 0) {
       newMinDate.setSeconds(newMinDate.getSeconds() + 1);
     } else if (precision === "minutes" && (newMinDate.getMilliseconds() > 0 || newMinDate.getSeconds() > 0)) {
       newMinDate.setMinutes(newMinDate.getMinutes() + 1);
     }
   }
-  const minTimeValue = (0, import_units.parseTimeAsTimeValue)(
-    !isNaN(newMinDate.getTime()) ? newMinDate.toISOString() : minDate?.absoluteDate,
-    relativeNow
-  );
-  const formattedMin = getFormattedTimeValue(minTimeValue, precision);
-  const formattedMax = getFormattedTimeValue(
+  const roundedMinIso = isMinDateValid ? newMinDate.toISOString() : minDate?.absoluteDate;
+  const minTimeValue = minDate && minDate.type !== "expression" ? { ...minDate, absoluteDate: roundedMinIso ?? minDate.absoluteDate } : null;
+  const formattedMin = minDate?.type === "expression" ? formatExpressionValue(minDate) : getFormattedTimeValue(minTimeValue, precision);
+  const formattedMax = maxDate?.type === "expression" ? formatExpressionValue(maxDate) : getFormattedTimeValue(
     maxDate,
     precision,
     !!minTimeValue && !!maxDate && (0, import_date_fns.isSameDay)(minTimeValue.absoluteDate, maxDate.absoluteDate)

package/core/time/shared.types.d.ts

@@ -2,7 +2,7 @@
  * Keys for time validation errors.
  * @internal
  */
-export type TimeErrorKey = 'maxBoundary' | 'minBoundary' | 'minMaxBoundary' | 'invalidOrder' | 'singleValueMissing' | 'invalid' | 'invalidFrom' | 'invalidTo' | 'invalidFromTo' | 'missingFrom' | 'missingTo' | 'missingFromTo' | 'valueMissing';
+export type TimeErrorKey = 'maxBoundary' | 'maxBoundaryNowError' | 'minBoundary' | 'minBoundaryNow' | 'minMaxBoundary' | 'invalidOrder' | 'singleValueMissing' | 'invalid' | 'invalidFrom' | 'invalidTo' | 'invalidFromTo' | 'missingFrom' | 'missingTo' | 'missingFromTo' | 'valueMissing';
 /**
  * Precision levels for time selection, affecting input parsing and display formatting.
  * @internal

package/core/time/timeErrorMessages.d.ts

@@ -0,0 +1,10 @@
+import type { TimeErrorKey } from './shared.types.js';
+/**
+ * Default time-validation error messages, shared across time-input components
+ * (`DateTimePicker`, `DateTimeRangePicker`, `TimeframeSelector`). Consumers that
+ * only need a subset build their own message map by omitting the keys that
+ * don't apply to them (see `TIMEFRAMESELECTOR_ERROR_MESSAGES`).
+ * @internal
+ */
+export declare const TIME_ERROR_MESSAGES: Record<TimeErrorKey, import("react-intl").MessageDescriptor>;
+//# sourceMappingURL=timeErrorMessages.d.ts.map

package/core/time/timeErrorMessages.js

@@ -0,0 +1,100 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var timeErrorMessages_exports = {};
+__export(timeErrorMessages_exports, {
+  TIME_ERROR_MESSAGES: () => TIME_ERROR_MESSAGES
+});
+module.exports = __toCommonJS(timeErrorMessages_exports);
+var import_react_intl = require("react-intl");
+const TIME_ERROR_MESSAGES = (0, import_react_intl.defineMessages)({
+  minBoundary: {
+    defaultMessage: "Only times from {min} onwards can be selected.",
+    id: "VrWs4XmGbZ3z7a3Y",
+    description: "Shown as hint when a min boundary is set, and as error when the selected time is before that boundary."
+  },
+  minBoundaryNow: {
+    defaultMessage: 'Only times starting from "Now" can be selected.',
+    id: "dBHTi/uZSdvpQ2Zu",
+    description: "Shown as hint when the min boundary is set to 'Now', and as error when the selected time is before that boundary."
+  },
+  maxBoundary: {
+    defaultMessage: "Only times up to {max} can be selected.",
+    id: "qES7K18UnrsWPhwk",
+    description: "Shown as hint when a max boundary is set, and as error when the selected time is after that boundary."
+  },
+  maxBoundaryNowError: {
+    defaultMessage: 'Only times up to "Now" can be selected. Try "Now" or a past time.',
+    id: "KGG/HbTw4ZLbI8vx",
+    description: "Shown as validation error when the selected time exceeds a max boundary set to 'Now'."
+  },
+  minMaxBoundary: {
+    defaultMessage: "Only times from {min} to {max} can be selected.",
+    id: "1H2kHk8y+z5PfQEE",
+    description: "Shown as hint when both boundaries are set, and as error when the selected time falls outside both."
+  },
+  invalidOrder: {
+    defaultMessage: "End time must be after start time. Enter an end time later than {startTime}.",
+    id: "mYn9mGgSX9a2yDnQ",
+    description: "Validation error when the end time is before the start time."
+  },
+  singleValueMissing: {
+    defaultMessage: "Please fill in this field.",
+    id: "hIK5810KwQytwP1q",
+    description: "DateTimePicker required value is missing."
+  },
+  missingFrom: {
+    defaultMessage: "Please enter a start time.",
+    id: "GUeetpTpusqFkMi+",
+    description: "From value is missing."
+  },
+  missingTo: {
+    defaultMessage: "Please enter an end time.",
+    id: "tfHTZkRc7sr/Ypcl",
+    description: "End value is missing."
+  },
+  missingFromTo: {
+    defaultMessage: "Please enter a start and end time.",
+    id: "4yANH5gdmW1efk0I",
+    description: "Start and end values are missing."
+  },
+  valueMissing: {
+    defaultMessage: "Empty timeframe.",
+    id: "QsKlSIxE+Yp58CUG",
+    description: "Timeframe selector required timeframe error hint."
+  },
+  invalid: {
+    defaultMessage: "Invalid time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "r/XpT4mat98jCrup",
+    description: "Given value is invalid"
+  },
+  invalidFrom: {
+    defaultMessage: "Invalid format for start time. Enter an exact date and time (01/01/2000, 00:00) or a relative expression (now-2h).",
+    id: "p9kOQBgxWYepT8B0",
+    description: "Validation error when the start time input cannot be parsed."
+  },
+  invalidTo: {
+    defaultMessage: "Invalid format for end time. Enter an exact date and time (01/01/2000, 00:00) or a relative expression (now-2h).",
+    id: "HAQQKModsP5sAIpb",
+    description: "Validation error when the end time input cannot be parsed."
+  },
+  invalidFromTo: {
+    defaultMessage: "Invalid formats for start and end time. Enter an exact date and time (01/01/2000, 00:00) or a relative expression (now-2h).",
+    id: "m5UDM9ivObqqdmnm",
+    description: "Validation error when both start and end time inputs cannot be parsed."
+  }
+});

package/core/time/validation.d.ts

@@ -4,7 +4,7 @@ import type { Precision, TimeErrorKey } from './shared.types.js';
 import { type FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';
 import { ValidityStateKey } from '../../forms/validation/types.js';
 import { type TimeValue } from '../types/time.js';
-type TimeBoundaryErrorKey = Extract<TimeErrorKey, 'maxBoundary' | 'minBoundary' | 'minMaxBoundary'>;
+type TimeBoundaryErrorKey = Extract<TimeErrorKey, 'maxBoundary' | 'maxBoundaryNowError' | 'minBoundary' | 'minBoundaryNow' | 'minMaxBoundary'>;
 type TimeBoundaryMessageValues = {
     min: string;
     max: string;

package/core/time/validation.js

@@ -31,6 +31,7 @@ var import_react_intl = require("react-intl");
 var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_helpers = require("./helpers.js");
+var import_timeErrorMessages = require("./timeErrorMessages.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_date_time = require("../../forms/forms-core/time/date-time.js");
 var import_types = require("../../forms/validation/types.js");
@@ -53,73 +54,6 @@ function isOutOfBounds(date, min, max) {
   }
   return void 0;
 }
-const DEFAULT_ERROR_MESSAGES = (0, import_react_intl.defineMessages)({
-  minBoundary: {
-    id: "KETnWaCwo9qLRQrI",
-    defaultMessage: "Only dates after {min} are available.",
-    description: "Given dates are not within the valid range."
-  },
-  maxBoundary: {
-    id: "ONYnUtFidz4+6NmE",
-    defaultMessage: "Only dates before {max} are available.",
-    description: "Given dates are not within the valid range."
-  },
-  minMaxBoundary: {
-    id: "Qm0/7EQKVXjS9tDM",
-    defaultMessage: "Only dates between {min} \u2192 {max} are available.",
-    description: "Given dates are not within the valid range."
-  },
-  invalidOrder: {
-    defaultMessage: "'from' date should be before 'to' date",
-    id: "DKFIWE64kHV1ohuk",
-    description: "Message to display if the from and to dates are in the wrong order."
-  },
-  singleValueMissing: {
-    defaultMessage: "Please fill in this field.",
-    id: "hIK5810KwQytwP1q",
-    description: "DateTimePicker required value is missing."
-  },
-  missingFrom: {
-    defaultMessage: "Please enter a start time.",
-    id: "GUeetpTpusqFkMi+",
-    description: "From value is missing."
-  },
-  missingTo: {
-    defaultMessage: "Please enter an end time.",
-    id: "tfHTZkRc7sr/Ypcl",
-    description: "End value is missing."
-  },
-  missingFromTo: {
-    defaultMessage: "Please enter a start and end time.",
-    id: "4yANH5gdmW1efk0I",
-    description: "Start and end values are missing."
-  },
-  valueMissing: {
-    defaultMessage: "Empty timeframe.",
-    id: "QsKlSIxE+Yp58CUG",
-    description: "Timeframe selector required timeframe error hint."
-  },
-  invalid: {
-    defaultMessage: "Invalid time. Expected format: {expectedFormat}, -2h or -2d@d",
-    id: "r/XpT4mat98jCrup",
-    description: "Given value is invalid"
-  },
-  invalidFrom: {
-    defaultMessage: "Invalid start time. Expected format: {expectedFormat}, -2h or -2d@d",
-    id: "supuOfI2cSrNKOZ/",
-    description: "Given from value is invalid"
-  },
-  invalidTo: {
-    defaultMessage: "Invalid end time. Expected format: {expectedFormat}, -2h or -2d@d",
-    id: "HL9dGWGnhYkm7OyC",
-    description: "Given to value is invalid"
-  },
-  invalidFromTo: {
-    defaultMessage: "Invalid start and end time. Expected format: {expectedFormat}, -2h or -2d@d",
-    id: "89sBAyzLbeW6GyPJ",
-    description: "Given from and to values are invalid"
-  }
-});
 function isValueOutsideGrailRange(value) {
   if (!value) {
     return false;
@@ -148,10 +82,13 @@ function filterGrailTimeValue(value, limit) {
   return isValueOutsideGrailRange(value) ? limit : null;
 }
 function isTimeBoundaryErrorKey(errorKey) {
-  return errorKey === "minBoundary" || errorKey === "maxBoundary" || errorKey === "minMaxBoundary";
+  return errorKey === "minBoundary" || errorKey === "minBoundaryNow" || errorKey === "maxBoundary" || errorKey === "maxBoundaryNowError" || errorKey === "minMaxBoundary";
 }
 function parseLimit(limit, relativeNow = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime()) {
   if (typeof limit !== "string") {
+    if (limit && !limit.absoluteDate) {
+      return null;
+    }
     return limit;
   }
   return (0, import_units.parseTimeAsTimeValue)(limit, relativeNow) ?? null;
@@ -161,7 +98,7 @@ function getBoundaryErrorKey(min, max) {
     return "minMaxBoundary";
   }
   if (min) {
-    return "minBoundary";
+    return (0, import_helpers.isNowTimeValue)(min) ? "minBoundaryNow" : "minBoundary";
   }
   if (max) {
     return "maxBoundary";
@@ -179,8 +116,8 @@ function getTimeBoundaryMessageData(value, min, max, precision = "minutes", only
     return void 0;
   }
   const { min: formattedMin, max: formattedMax } = (0, import_helpers.getFormattedMinMax)(
-    filteredMin?.value,
-    filteredMax?.value,
+    filteredMin,
+    filteredMax,
     precision
   );
   const resolvedTerm = term ?? (value && ("from" in value || "to" in value) ? "timeframe" : "date");
@@ -194,14 +131,21 @@ function getTimeBoundaryMessageData(value, min, max, precision = "minutes", only
   };
 }
 function getOutOfBoundsErrorKey(updatedValue, min, max) {
+  let errorKey;
   if (updatedValue && ("from" in updatedValue || "to" in updatedValue) && (0, import_helpers.isTimeframe)(updatedValue, "range")) {
     const fromErrorKey = isOutOfBounds(updatedValue?.from?.value, min, max);
     const toErrorKey = isOutOfBounds(updatedValue?.to?.value, min, max);
-    return fromErrorKey || toErrorKey;
+    errorKey = fromErrorKey || toErrorKey;
+  } else if (updatedValue && (0, import_helpers.isTimeValue)(updatedValue)) {
+    errorKey = isOutOfBounds(updatedValue.value, min, max);
+  }
+  if (errorKey === "maxBoundary" && (0, import_helpers.isNowTimeValue)(max)) {
+    return "maxBoundaryNowError";
   }
-  if (updatedValue && (0, import_helpers.isTimeValue)(updatedValue)) {
-    return isOutOfBounds(updatedValue.value, min, max);
+  if (errorKey === "minBoundary" && (0, import_helpers.isNowTimeValue)(min)) {
+    return "minBoundaryNow";
   }
+  return errorKey;
 }
 function isInvalidOrder(value) {
   if ((0, import_helpers.isFullTimeframe)(value)) {
@@ -268,7 +212,9 @@ const VALIDITY_KEY_MAP = {
 };
 const EXTERNAL_VALIDITY_KEY_MAP = {
   minBoundary: "rangeUnderflow",
+  minBoundaryNow: "rangeUnderflow",
   maxBoundary: "rangeOverflow",
+  maxBoundaryNowError: "rangeOverflow",
   singleValueMissing: "valueMissing",
   missingFromTo: "valueMissing"
 };
@@ -303,7 +249,11 @@ function validate(value, min, max, options) {
   const outOfBoundsError = timeBoundaryMessageData?.errorKey;
   const errorKey = invalidOrderError ?? valueMissingError ?? outOfBoundsError ?? invalidError;
   if (errorKey) {
-    const messageDef = errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];
+    const messageDef = errorMessages?.[errorKey] ?? import_timeErrorMessages.TIME_ERROR_MESSAGES[errorKey];
+    const startTime = (0, import_helpers.getFormattedTimeValue)(
+      (0, import_helpers.isTimeValue)(value) ? null : value?.from ?? null,
+      validationPrecision
+    );
     validationRef?.current && formMessageDispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
       payload: {
@@ -316,7 +266,8 @@ function validate(value, min, max, options) {
             ...messageDef,
             values: {
               ...timeBoundaryMessageData?.values,
-              expectedFormat: expectedValidationFormat
+              expectedFormat: expectedValidationFormat,
+              startTime
             }
           }
         ),
@@ -345,16 +296,24 @@ function formatTimeValidationMessage(errorKey, intl, options) {
     expectedFormat,
     errorMessages
   } = options ?? {};
-  const msgDef = errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];
+  const msgDef = errorMessages?.[errorKey] ?? import_timeErrorMessages.TIME_ERROR_MESSAGES[errorKey];
   if (!msgDef) {
     return errorKey;
   }
   if (isTimeBoundaryErrorKey(errorKey)) {
     return intl.formatMessage(
       msgDef,
-      getTimeBoundaryMessageData(value ?? null, min, max, precision)?.values
+      getTimeBoundaryMessageData(value ?? null, min, max, precision, false)?.values
     );
   }
+  if (errorKey === "invalidOrder") {
+    return intl.formatMessage(msgDef, {
+      startTime: (0, import_helpers.getFormattedTimeValue)(
+        (0, import_helpers.isTimeValue)(value) ? null : value?.from ?? null,
+        precision
+      )
+    });
+  }
   return intl.formatMessage(
     msgDef,
     errorKey === "invalid" || errorKey === "invalidFrom" || errorKey === "invalidTo" || errorKey === "invalidFromTo" ? { expectedFormat: expectedFormat ?? "" } : void 0

package/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-3-10-1: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-3-10-1: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-3-11-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-3-11-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-3-10-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-3-10-1: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-3-11-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-3-11-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-3-10-1: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-3-10-1: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-3-11-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-3-11-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-3-10-1: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-3-10-1: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-3-11-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-3-11-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-3-10-1: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-3-10-1: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-3-11-0: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-3-11-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-3-10-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-3-10-1: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-3-11-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-3-11-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-3-10-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-3-10-1: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-3-11-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-3-11-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-3-10-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-3-10-1: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-3-11-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-3-11-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-3-10-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-3-10-1: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-3-11-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-3-11-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-3-10-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-3-10-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-3-11-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-3-11-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-3-10-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-3-10-1: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-3-11-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-3-11-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-3-10-1: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-3-10-1: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-3-11-0: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-3-11-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-3-10-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-3-10-1: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-3-11-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-3-11-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-3-10-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-3-10-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-3-11-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-3-11-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-3-10-1 {
-  --_k096v40-3-10-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-3-10-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-3-10-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-3-11-0 {
+  --_k096v40-3-11-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-3-11-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-3-11-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/core/utils/colorUtils.sty.js

@@ -23,5 +23,5 @@ __export(colorUtils_css_exports, {
 module.exports = __toCommonJS(colorUtils_css_exports);
 var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-10-1", variantClassNames: { color: { critical: "_k096v44-3-10-1", neutral: "_k096v45-3-10-1", primary: "_k096v46-3-10-1", success: "_k096v47-3-10-1", warning: "_k096v48-3-10-1" }, variant: { "default": "_k096v49-3-10-1", accent: "_k096v4a-3-10-1" }, disabled: { true: "_k096v4b-3-10-1", false: "_k096v4c-3-10-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-10-1"], [{ color: "success", variant: "accent" }, "_k096v4e-3-10-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-10-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-10-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-10-1"], [{ color: "primary", disabled: true }, "_k096v4i-3-10-1"], [{ color: "success", disabled: true }, "_k096v4j-3-10-1"], [{ color: "warning", disabled: true }, "_k096v4k-3-10-1"], [{ color: "critical", disabled: true }, "_k096v4l-3-10-1"], [{ color: "neutral", disabled: true }, "_k096v4m-3-10-1"]] });
-var colorUtilsVars = { text: "var(--_k096v40-3-10-1)", icon: "var(--_k096v41-3-10-1)", borderColor: "var(--_k096v42-3-10-1)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-11-0", variantClassNames: { color: { critical: "_k096v44-3-11-0", neutral: "_k096v45-3-11-0", primary: "_k096v46-3-11-0", success: "_k096v47-3-11-0", warning: "_k096v48-3-11-0" }, variant: { "default": "_k096v49-3-11-0", accent: "_k096v4a-3-11-0" }, disabled: { true: "_k096v4b-3-11-0", false: "_k096v4c-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-11-0"], [{ color: "success", variant: "accent" }, "_k096v4e-3-11-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-11-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-11-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-11-0"], [{ color: "primary", disabled: true }, "_k096v4i-3-11-0"], [{ color: "success", disabled: true }, "_k096v4j-3-11-0"], [{ color: "warning", disabled: true }, "_k096v4k-3-11-0"], [{ color: "critical", disabled: true }, "_k096v4l-3-11-0"], [{ color: "neutral", disabled: true }, "_k096v4m-3-11-0"]] });
+var colorUtilsVars = { text: "var(--_k096v40-3-11-0)", icon: "var(--_k096v41-3-11-0)", borderColor: "var(--_k096v42-3-11-0)" };

package/core/utils/diagnostic-tooltip/render-diagnostic-message.d.ts

@@ -0,0 +1,21 @@
+type DiagnosticSeverity = 'error' | 'warning' | 'info';
+/**
+ * Builds the content shown inside a CodeMirror lint tooltip: a leading severity icon followed
+ * by the diagnostic message. Returned as a `Diagnostic.renderMessage` factory.
+ *
+ * @param severity - the diagnostic severity, driving which icon is shown.
+ * @param message - the diagnostic message. By default applied via `textContent` (not `innerHTML`),
+ * since messages can originate from consumers or external APIs and must not be treated as markup.
+ * @param wrapperClass - CSS class applied to the outer flex container, letting each consumer
+ * scope its own tooltip styling. The icon element always uses the shared {@link diagnosticIconClass}.
+ * @param options - additional rendering options. `dangerouslyRenderHtml`, when `true`, injects the
+ * message via `innerHTML` instead of `textContent` — only for **trusted, internally generated**
+ * markup (e.g. FilterField's syntax-colored operator list), never for consumer- or API-provided
+ * strings.
+ * @internal
+ */
+export declare function renderDiagnosticMessage(severity: DiagnosticSeverity, message: string, wrapperClass: string, options?: {
+    dangerouslyRenderHtml?: boolean;
+}): () => HTMLElement;
+export {};
+//# sourceMappingURL=render-diagnostic-message.d.ts.map

package/core/utils/diagnostic-tooltip/render-diagnostic-message.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var render_diagnostic_message_exports = {};
+__export(render_diagnostic_message_exports, {
+  renderDiagnosticMessage: () => renderDiagnosticMessage
+});
+module.exports = __toCommonJS(render_diagnostic_message_exports);
+var import_diagnostic_tooltip_css = require("../../styles/diagnostic-tooltip.sty.js");
+const ICON_PATHS = {
+  error: '<path d="M9.25 6.237h1.5v4.5h-1.5z" /><path d="M11 12.737a1 1 0 1 0-2 0 1 1 0 0 0 2 0" /><path d="M9.293 1.513a1 1 0 0 1 1.414 0l7.78 7.78a1 1 0 0 1 0 1.414l-7.78 7.78a1 1 0 0 1-1.414 0l-7.78-7.78a1 1 0 0 1 0-1.414zM17.073 10 10 2.927 2.927 10 10 17.073z" />',
+  warning: '<path d="M9.372 7.913h1.507v4.54H9.372z" /><path d="M10.125 13.461A1.007 1.007 0 0 0 9.12 14.47a1.007 1.007 0 0 0 1.005 1.008 1.007 1.007 0 0 0 1.005-1.008 1.007 1.007 0 0 0-1.005-1.009" /><path d="M9.693 2.098c-.3.144-.527.573-.98 1.432L2.325 15.646c-.406.768-.608 1.153-.57 1.466a1 1 0 0 0 .424.708C2.437 18 2.87 18 3.736 18h12.778c.866 0 1.299 0 1.557-.18a1 1 0 0 0 .424-.708c.038-.313-.164-.698-.57-1.466L11.537 3.53c-.453-.859-.68-1.288-.98-1.432a1 1 0 0 0-.864 0m.432 1.989 6.539 12.4H3.586z" />',
+  info: '<path d="M10.75 9v5h-1.5V9z" /><path d="M10 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2" /><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m-6.5-8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0" />'
+};
+function renderDiagnosticMessage(severity, message, wrapperClass, options) {
+  return () => {
+    const wrapper = document.createElement("div");
+    wrapper.className = wrapperClass;
+    const iconWrapper = document.createElement("div");
+    iconWrapper.className = import_diagnostic_tooltip_css.diagnosticIconClass;
+    iconWrapper.innerHTML = `<svg focusable="false" role="img" aria-hidden="true" fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">${ICON_PATHS[severity]}</svg>`;
+    const messageElement = document.createElement("div");
+    if (options?.dangerouslyRenderHtml) {
+      messageElement.innerHTML = message;
+    } else {
+      messageElement.textContent = message;
+    }
+    wrapper.append(iconWrapper, messageElement);
+    return wrapper;
+  };
+}