@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/forms/toggle-button-group/styles.sty.js

@@ -1,21 +1,21 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh1-3-7-1";
-var container = "_w5wkeh7-3-7-1";
-var containerWidths = { full: "_w5wkeh9-3-7-1", content: "_w5wkeha-3-7-1" };
-var disabled = "_w5wkeh3-3-7-1";
-var disabledGroup = "_w5wkeh5-3-7-1";
-var divider = "_w5wkeh8-3-7-1";
-var error = "_w5wkeh2-3-7-1";
-var hidden = "_w5wkeh6-3-7-1";
-var item = "_w5wkehg-3-7-1";
-var readOnly = "_w5wkeh4-3-7-1";
-var scrollButton = "_w5wkehf-3-7-1";
-var scrollContainer = "_w5wkehb-3-7-1";
-var scrollVariants = { both: "_w5wkehc-3-7-1", left: "_w5wkehd-3-7-1", right: "_w5wkehe-3-7-1" };
-var text = "_w5wkehh-3-7-1";
-var textContainer = "_w5wkehi-3-7-1";
+var checked = "_w5wkeh1-3-8-0";
+var container = "_w5wkeh7-3-8-0";
+var containerWidths = { full: "_w5wkeh9-3-8-0", content: "_w5wkeha-3-8-0" };
+var disabled = "_w5wkeh3-3-8-0";
+var disabledGroup = "_w5wkeh5-3-8-0";
+var divider = "_w5wkeh8-3-8-0";
+var error = "_w5wkeh2-3-8-0";
+var hidden = "_w5wkeh6-3-8-0";
+var item = "_w5wkehg-3-8-0";
+var readOnly = "_w5wkeh4-3-8-0";
+var scrollButton = "_w5wkehf-3-8-0";
+var scrollContainer = "_w5wkehb-3-8-0";
+var scrollVariants = { both: "_w5wkehc-3-8-0", left: "_w5wkehd-3-8-0", right: "_w5wkehe-3-8-0" };
+var text = "_w5wkehh-3-8-0";
+var textContainer = "_w5wkehi-3-8-0";
 export {
   checked,
   container,

package/esm/forms/toggle-button-group/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-7-1';\nexport var container = '_w5wkeh7-3-7-1';\nexport var containerWidths = {full:'_w5wkeh9-3-7-1',content:'_w5wkeha-3-7-1'};\nexport var disabled = '_w5wkeh3-3-7-1';\nexport var disabledGroup = '_w5wkeh5-3-7-1';\nexport var divider = '_w5wkeh8-3-7-1';\nexport var error = '_w5wkeh2-3-7-1';\nexport var hidden = '_w5wkeh6-3-7-1';\nexport var item = '_w5wkehg-3-7-1';\nexport var readOnly = '_w5wkeh4-3-7-1';\nexport var scrollButton = '_w5wkehf-3-7-1';\nexport var scrollContainer = '_w5wkehb-3-7-1';\nexport var scrollVariants = {both:'_w5wkehc-3-7-1',left:'_w5wkehd-3-7-1',right:'_w5wkehe-3-7-1'};\nexport var text = '_w5wkehh-3-7-1';\nexport var textContainer = '_w5wkehi-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-8-0';\nexport var container = '_w5wkeh7-3-8-0';\nexport var containerWidths = {full:'_w5wkeh9-3-8-0',content:'_w5wkeha-3-8-0'};\nexport var disabled = '_w5wkeh3-3-8-0';\nexport var disabledGroup = '_w5wkeh5-3-8-0';\nexport var divider = '_w5wkeh8-3-8-0';\nexport var error = '_w5wkeh2-3-8-0';\nexport var hidden = '_w5wkeh6-3-8-0';\nexport var item = '_w5wkehg-3-8-0';\nexport var readOnly = '_w5wkeh4-3-8-0';\nexport var scrollButton = '_w5wkehf-3-8-0';\nexport var scrollContainer = '_w5wkehb-3-8-0';\nexport var scrollVariants = {both:'_w5wkehc-3-8-0',left:'_w5wkehd-3-8-0',right:'_w5wkehe-3-8-0'};\nexport var text = '_w5wkehh-3-8-0';\nexport var textContainer = '_w5wkehi-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,kBAAkB,EAAC,MAAK,kBAAiB,SAAQ,iBAAgB;AACrE,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB,EAAC,MAAK,kBAAiB,MAAK,kBAAiB,OAAM,iBAAgB;AACxF,IAAI,OAAO;AACX,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/validation/types.js

@@ -0,0 +1,63 @@
+class ValidityStateKey {
+  constructor(value) {
+    this.value = value;
+  }
+  value;
+  /** Value equality check. Safe across module boundaries. */
+  equals(other) {
+    return this.value === other.value;
+  }
+  toString() {
+    return this.value;
+  }
+}
+const NativeValidityStateKeys = {
+  valueMissing: new ValidityStateKey("valueMissing"),
+  typeMismatch: new ValidityStateKey("typeMismatch"),
+  patternMismatch: new ValidityStateKey("patternMismatch"),
+  tooLong: new ValidityStateKey("tooLong"),
+  tooShort: new ValidityStateKey("tooShort"),
+  rangeUnderflow: new ValidityStateKey("rangeUnderflow"),
+  rangeOverflow: new ValidityStateKey("rangeOverflow"),
+  stepMismatch: new ValidityStateKey("stepMismatch"),
+  badInput: new ValidityStateKey("badInput"),
+  customError: new ValidityStateKey("customError")
+};
+const StratoValidityStateKeys = {
+  syntaxError: new ValidityStateKey("syntaxError"),
+  minMaxBoundary: new ValidityStateKey("minMaxBoundary"),
+  invalidOrder: new ValidityStateKey("invalidOrder"),
+  invalid: new ValidityStateKey("invalid"),
+  invalidFrom: new ValidityStateKey("invalidFrom"),
+  invalidTo: new ValidityStateKey("invalidTo"),
+  invalidFromTo: new ValidityStateKey("invalidFromTo"),
+  missingFrom: new ValidityStateKey("missingFrom"),
+  missingTo: new ValidityStateKey("missingTo"),
+  arrayIdentifierError: new ValidityStateKey("arrayIdentifierError"),
+  unavailable: new ValidityStateKey("unavailable"),
+  needsUpdate: new ValidityStateKey("needs-update"),
+  missingVariables: new ValidityStateKey("missing-variables"),
+  genericError: new ValidityStateKey("genericError")
+};
+class ValidationError extends Error {
+  /** Where the error came from. */
+  source;
+  /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */
+  validityStateKey;
+  /** ID(s) of all form control inputs affected by this error. */
+  formControlId;
+  constructor(message, options = {}) {
+    super(message, { cause: options.cause });
+    this.name = "ValidationError";
+    this.source = options.source ?? "custom";
+    this.validityStateKey = options.validityStateKey ?? NativeValidityStateKeys.customError;
+    this.formControlId = options.formControlId;
+  }
+}
+export {
+  NativeValidityStateKeys,
+  StratoValidityStateKeys,
+  ValidationError,
+  ValidityStateKey
+};
+//# sourceMappingURL=types.js.map

package/esm/forms/validation/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/validation/types.ts"],
+  "sourcesContent": ["/**\n * Lifecycle state of a validation run.\n * @public\n */\nexport type ValidationStatus = 'pending' | 'done' | 'aborted';\n\n/**\n * Why a validation run was triggered.\n * @public\n */\nexport type ValidationTrigger =\n  | 'change'\n  | 'blur'\n  | 'manual'\n  | 'submit'\n  | 'initial';\n\n/**\n * Where a {@link ValidationError} originated.\n * @public\n */\nexport type ValidationErrorSource = 'native' | 'strato' | 'custom';\n\n/**\n * Stable, comparable identity for a validity key.\n *\n * @remarks\n * Use {@link ValidityStateKey.equals} for comparisons. `===` fails across\n * module boundaries since each instance is a distinct object reference.\n *\n * @public\n */\nexport class ValidityStateKey<T extends string = string> {\n  constructor(readonly value: T) {}\n\n  /** Value equality check. Safe across module boundaries. */\n  equals(other: ValidityStateKey): boolean {\n    return this.value === other.value;\n  }\n\n  toString(): string {\n    return this.value;\n  }\n}\n\n/**\n * Browser-native validity keys, wrapping the same values as the native\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState | ValidityState}.\n * @public\n */\nexport const NativeValidityStateKeys = {\n  valueMissing: new ValidityStateKey('valueMissing'),\n  typeMismatch: new ValidityStateKey('typeMismatch'),\n  patternMismatch: new ValidityStateKey('patternMismatch'),\n  tooLong: new ValidityStateKey('tooLong'),\n  tooShort: new ValidityStateKey('tooShort'),\n  rangeUnderflow: new ValidityStateKey('rangeUnderflow'),\n  rangeOverflow: new ValidityStateKey('rangeOverflow'),\n  stepMismatch: new ValidityStateKey('stepMismatch'),\n  badInput: new ValidityStateKey('badInput'),\n  customError: new ValidityStateKey('customError'),\n} as const;\n\n/**\n * Union of the browser-native validity keys.\n * @public\n */\nexport type NativeValidityStateKey =\n  (typeof NativeValidityStateKeys)[keyof typeof NativeValidityStateKeys];\n\n/**\n * Strato-specific validity keys used by components whose validation cannot be\n * represented by browser-native validity states.\n * @public\n */\nexport const StratoValidityStateKeys = {\n  syntaxError: new ValidityStateKey('syntaxError'),\n  minMaxBoundary: new ValidityStateKey('minMaxBoundary'),\n  invalidOrder: new ValidityStateKey('invalidOrder'),\n  invalid: new ValidityStateKey('invalid'),\n  invalidFrom: new ValidityStateKey('invalidFrom'),\n  invalidTo: new ValidityStateKey('invalidTo'),\n  invalidFromTo: new ValidityStateKey('invalidFromTo'),\n  missingFrom: new ValidityStateKey('missingFrom'),\n  missingTo: new ValidityStateKey('missingTo'),\n  arrayIdentifierError: new ValidityStateKey('arrayIdentifierError'),\n  unavailable: new ValidityStateKey('unavailable'),\n  needsUpdate: new ValidityStateKey('needs-update'),\n  missingVariables: new ValidityStateKey('missing-variables'),\n  genericError: new ValidityStateKey('genericError'),\n} as const;\n\n/**\n * Union of Strato-specific validity keys.\n * @public\n */\nexport type StratoValidityStateKey =\n  (typeof StratoValidityStateKeys)[keyof typeof StratoValidityStateKeys];\n\n/**\n * Options accepted by the {@link ValidationError} constructor.\n * @public\n */\nexport type ValidationErrorOptions = ErrorOptions & {\n  /** Where the error came from. @defaultValue `'custom'` */\n  source?: ValidationErrorSource;\n  /** Stable error identity. @defaultValue `NativeValidityStateKeys.customError` */\n  validityStateKey?: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  formControlId?: string | string[];\n};\n\n/**\n * A single validation error.\n *\n * @remarks\n * Extends `Error` so that `instanceof` narrowing works across package\n * boundaries and the original async failure can be preserved via `Error.cause`.\n *\n * @public\n */\nexport class ValidationError extends Error {\n  /** Where the error came from. */\n  readonly source: ValidationErrorSource;\n  /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */\n  readonly validityStateKey: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  readonly formControlId: string | string[] | undefined;\n\n  constructor(message: string, options: ValidationErrorOptions = {}) {\n    super(message, { cause: options.cause });\n    this.name = 'ValidationError';\n    this.source = options.source ?? 'custom';\n    this.validityStateKey =\n      options.validityStateKey ?? NativeValidityStateKeys.customError;\n    this.formControlId = options.formControlId;\n  }\n}\n\n/**\n * Shared validation result type returned by `validateAsync()` and passed to\n * `onValidityChange`.\n * @public\n */\nexport type ValidationState = {\n  /** Validation lifecycle state. */\n  status: ValidationStatus;\n  /** Why validation fired. */\n  trigger: ValidationTrigger;\n  /** Validation errors. Empty when the control is valid or still `'pending'`. */\n  errors: ValidationError[];\n};\n"],
+  "mappings": "AAgCO,MAAM,iBAA4C;AAAA,EACvD,YAAqB,OAAU;AAAV;AAAA,EAAW;AAAA,EAAX;AAAA;AAAA,EAGrB,OAAO,OAAkC;AACvC,WAAO,KAAK,UAAU,MAAM;AAAA,EAC9B;AAAA,EAEA,WAAmB;AACjB,WAAO,KAAK;AAAA,EACd;AACF;AAOO,MAAM,0BAA0B;AAAA,EACrC,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,iBAAiB,IAAI,iBAAiB,iBAAiB;AAAA,EACvD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,aAAa,IAAI,iBAAiB,aAAa;AACjD;AAcO,MAAM,0BAA0B;AAAA,EACrC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,sBAAsB,IAAI,iBAAiB,sBAAsB;AAAA,EACjE,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,aAAa,IAAI,iBAAiB,cAAc;AAAA,EAChD,kBAAkB,IAAI,iBAAiB,mBAAmB;AAAA,EAC1D,cAAc,IAAI,iBAAiB,cAAc;AACnD;AA+BO,MAAM,wBAAwB,MAAM;AAAA;AAAA,EAEhC;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EAET,YAAY,SAAiB,UAAkC,CAAC,GAAG;AACjE,UAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,CAAC;AACvC,SAAK,OAAO;AACZ,SAAK,SAAS,QAAQ,UAAU;AAChC,SAAK,mBACH,QAAQ,oBAAoB,wBAAwB;AACtD,SAAK,gBAAgB,QAAQ;AAAA,EAC/B;AACF;",
+  "names": []
+}

package/esm/forms/validation/useCustomMessageEmitter.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+  NativeValidityStateKeys,
+  ValidationError
+} from "./types.js";
+import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+function useCustomMessageEmitter(emitValidationState, getBaseState) {
+  const { state } = useFormFieldMessagesContext();
+  const customErrorKey = state.customMessages.filter((m) => m.variant === "error").map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ""}`).sort((a, b) => a.localeCompare(b)).join(",");
+  const customMessagesRef = useRef(state.customMessages);
+  customMessagesRef.current = state.customMessages;
+  const customMessageTextsRef = useRef(state.customMessageTexts);
+  customMessageTextsRef.current = state.customMessageTexts;
+  const controlIdsRef = useRef(state.controlIds);
+  controlIdsRef.current = state.controlIds;
+  const isTouchedRef = useRef(state.isTouched);
+  isTouchedRef.current = state.isTouched;
+  const getBaseStateRef = useRef(getBaseState);
+  getBaseStateRef.current = getBaseState;
+  const emitWithCustomErrors = useCallback(
+    (validationState) => {
+      const customErrors = customMessagesRef.current.filter(
+        (m) => m.variant === "error"
+      );
+      const baseErrors = validationState.errors.filter(
+        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError)
+      );
+      const baseControlId = baseErrors.find((e) => e.formControlId !== void 0)?.formControlId ?? controlIdsRef.current;
+      const merged = {
+        ...validationState,
+        errors: [
+          ...baseErrors,
+          ...customErrors.map(
+            (m) => new ValidationError(customMessageTextsRef.current?.[m.id] ?? "", {
+              source: "custom",
+              formControlId: m.controlId ?? baseControlId
+            })
+          )
+        ]
+      };
+      emitValidationState?.(merged);
+      return merged;
+    },
+    [emitValidationState]
+  );
+  const customErrorKeyRef = useRef(customErrorKey);
+  customErrorKeyRef.current = customErrorKey;
+  const scheduleEmit = useCallback(() => {
+    let cancelled = false;
+    const run = async () => {
+      const baseState = await getBaseStateRef.current?.() ?? {
+        status: "done",
+        trigger: "manual",
+        errors: []
+      };
+      if (cancelled) {
+        return;
+      }
+      emitWithCustomErrors(baseState);
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [emitWithCustomErrors]);
+  useEffect(() => {
+    if (!emitValidationState || !isTouchedRef.current) {
+      return;
+    }
+    return scheduleEmit();
+  }, [customErrorKey, emitValidationState, scheduleEmit]);
+  useEffect(() => {
+    if (!emitValidationState || !isTouchedRef.current || !customErrorKeyRef.current) {
+      return;
+    }
+    return scheduleEmit();
+  }, [state.isTouched, emitValidationState, scheduleEmit]);
+  return emitWithCustomErrors;
+}
+export {
+  useCustomMessageEmitter
+};
+//# sourceMappingURL=useCustomMessageEmitter.js.map

package/esm/forms/validation/useCustomMessageEmitter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/validation/useCustomMessageEmitter.ts"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n  type ValidationState,\n} from './types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Returns a wrapped `emitValidationState` that always merges current custom\n * error messages into every emitted state. Also fires when the set of custom\n * errors changes (added or removed), using `getBaseState` to determine the\n * underlying native/Strato errors at that point.\n * @internal\n */\nexport function useCustomMessageEmitter(\n  emitValidationState: ((state: ValidationState) => void) | undefined,\n  getBaseState?: () => ValidationState | Promise<ValidationState>,\n): (state: ValidationState) => ValidationState {\n  const { state } = useFormFieldMessagesContext();\n\n  // Stable primitive dep: detects add/remove/swap by ID and message text changes.\n  const customErrorKey = state.customMessages\n    .filter((m) => m.variant === 'error')\n    .map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ''}`)\n    .sort((a, b) => a.localeCompare(b))\n    .join(',');\n\n  // Read via ref so callbacks always see current values without re-creating.\n  const customMessagesRef = useRef(state.customMessages);\n  customMessagesRef.current = state.customMessages;\n\n  const customMessageTextsRef = useRef(state.customMessageTexts);\n  customMessageTextsRef.current = state.customMessageTexts;\n\n  const controlIdsRef = useRef(state.controlIds);\n  controlIdsRef.current = state.controlIds;\n\n  const isTouchedRef = useRef(state.isTouched);\n  isTouchedRef.current = state.isTouched;\n\n  const getBaseStateRef = useRef(getBaseState);\n  getBaseStateRef.current = getBaseState;\n\n  // Wrapped emitter: merges current custom errors into every emitted state so\n  // that onChange/onBlur calls never silently drop an active custom error.\n  // Returns the merged state so callers (e.g. validateAsync) can return it\n  // directly instead of the raw pre-merge state.\n  const emitWithCustomErrors = useCallback(\n    (validationState: ValidationState): ValidationState => {\n      const customErrors = customMessagesRef.current.filter(\n        (m) => m.variant === 'error',\n      );\n\n      // native/customError is set via setCustomValidity and is already\n      // represented by our explicit custom entries \u2014 exclude to avoid doubling.\n      const baseErrors = validationState.errors.filter(\n        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError),\n      );\n\n      // Prefer the form control ID from native errors (already knows the right\n      // input element). Fall back to context-registered control IDs for cases\n      // where there are no native errors.\n      const baseControlId =\n        baseErrors.find((e) => e.formControlId !== undefined)?.formControlId ??\n        controlIdsRef.current;\n\n      const merged: ValidationState = {\n        ...validationState,\n        errors: [\n          ...baseErrors,\n          ...customErrors.map(\n            (m) =>\n              new ValidationError(customMessageTextsRef.current?.[m.id] ?? '', {\n                source: 'custom',\n                formControlId: m.controlId ?? baseControlId,\n              }),\n          ),\n        ],\n      };\n\n      emitValidationState?.(merged);\n      return merged;\n    },\n    [emitValidationState],\n  );\n\n  const customErrorKeyRef = useRef(customErrorKey);\n  customErrorKeyRef.current = customErrorKey;\n\n  const scheduleEmit = useCallback(() => {\n    let cancelled = false;\n    const run = async () => {\n      const baseState = (await getBaseStateRef.current?.()) ?? {\n        status: 'done' as const,\n        trigger: 'manual' as const,\n        errors: [],\n      };\n      if (cancelled) {\n        return;\n      }\n      emitWithCustomErrors(baseState);\n    };\n    void run();\n    return () => {\n      cancelled = true;\n    };\n  }, [emitWithCustomErrors]);\n\n  // Fires when the custom error set changes (add, remove, swap) so the consumer\n  // always gets an up-to-date state without a value change being required.\n  useEffect(() => {\n    if (!emitValidationState || !isTouchedRef.current) {\n      return;\n    }\n    return scheduleEmit();\n  }, [customErrorKey, emitValidationState, scheduleEmit]);\n\n  // Fires when isTouched flips to true while custom errors are already pending,\n  // covering the case where errors were set before the field was ever blurred.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      !isTouchedRef.current ||\n      !customErrorKeyRef.current\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [state.isTouched, emitValidationState, scheduleEmit]);\n\n  return emitWithCustomErrors;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mCAAmC;AASrC,SAAS,wBACd,qBACA,cAC6C;AAC7C,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAG9C,QAAM,iBAAiB,MAAM,eAC1B,OAAO,CAAC,MAAM,EAAE,YAAY,OAAO,EACnC,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,IAAI,MAAM,qBAAqB,EAAE,EAAE,KAAK,EAAE,EAAE,EAC9D,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC,EACjC,KAAK,GAAG;AAGX,QAAM,oBAAoB,OAAO,MAAM,cAAc;AACrD,oBAAkB,UAAU,MAAM;AAElC,QAAM,wBAAwB,OAAO,MAAM,kBAAkB;AAC7D,wBAAsB,UAAU,MAAM;AAEtC,QAAM,gBAAgB,OAAO,MAAM,UAAU;AAC7C,gBAAc,UAAU,MAAM;AAE9B,QAAM,eAAe,OAAO,MAAM,SAAS;AAC3C,eAAa,UAAU,MAAM;AAE7B,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAM1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,oBAAsD;AACrD,YAAM,eAAe,kBAAkB,QAAQ;AAAA,QAC7C,CAAC,MAAM,EAAE,YAAY;AAAA,MACvB;AAIA,YAAM,aAAa,gBAAgB,OAAO;AAAA,QACxC,CAAC,MAAM,CAAC,EAAE,iBAAiB,OAAO,wBAAwB,WAAW;AAAA,MACvE;AAKA,YAAM,gBACJ,WAAW,KAAK,CAAC,MAAM,EAAE,kBAAkB,MAAS,GAAG,iBACvD,cAAc;AAEhB,YAAM,SAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,GAAG,aAAa;AAAA,YACd,CAAC,MACC,IAAI,gBAAgB,sBAAsB,UAAU,EAAE,EAAE,KAAK,IAAI;AAAA,cAC/D,QAAQ;AAAA,cACR,eAAe,EAAE,aAAa;AAAA,YAChC,CAAC;AAAA,UACL;AAAA,QACF;AAAA,MACF;AAEA,4BAAsB,MAAM;AAC5B,aAAO;AAAA,IACT;AAAA,IACA,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,oBAAoB,OAAO,cAAc;AAC/C,oBAAkB,UAAU;AAE5B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,YAAY;AAChB,UAAM,MAAM,YAAY;AACtB,YAAM,YAAa,MAAM,gBAAgB,UAAU,KAAM;AAAA,QACvD,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ,CAAC;AAAA,MACX;AACA,UAAI,WAAW;AACb;AAAA,MACF;AACA,2BAAqB,SAAS;AAAA,IAChC;AACA,SAAK,IAAI;AACT,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AAIzB,YAAU,MAAM;AACd,QAAI,CAAC,uBAAuB,CAAC,aAAa,SAAS;AACjD;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,gBAAgB,qBAAqB,YAAY,CAAC;AAItD,YAAU,MAAM;AACd,QACE,CAAC,uBACD,CAAC,aAAa,WACd,CAAC,kBAAkB,SACnB;AACA;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,MAAM,WAAW,qBAAqB,YAAY,CAAC;AAEvD,SAAO;AACT;",
+  "names": []
+}

package/esm/forms/validation/useValidationStateEmitter.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef } from "react";
+import { useCallbackRef } from "../../core/hooks/useCallbackRef.js";
+function useValidationStateEmitter(onValidityChange) {
+  const lastSignatureRef = useRef();
+  const onValidityChangeCallback = useCallbackRef(onValidityChange);
+  return useCallback(
+    (state) => {
+      const lastSignature = lastSignatureRef.current;
+      const nextSignature = {
+        errorKeys: state.errors.map((e) => e.validityStateKey.toString()).sort((a, b) => a.localeCompare(b)),
+        trigger: state.trigger
+      };
+      if (lastSignature === void 0 && nextSignature.trigger === "change") {
+        return;
+      }
+      const sameErrors = lastSignature !== void 0 && lastSignature.errorKeys.length === nextSignature.errorKeys.length && lastSignature.errorKeys.every(
+        (key, i) => key === nextSignature.errorKeys[i]
+      );
+      if (sameErrors && nextSignature.trigger !== "manual") {
+        return;
+      }
+      lastSignatureRef.current = nextSignature;
+      onValidityChangeCallback(state);
+    },
+    [onValidityChangeCallback]
+  );
+}
+export {
+  useValidationStateEmitter
+};
+//# sourceMappingURL=useValidationStateEmitter.js.map

package/esm/forms/validation/useValidationStateEmitter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/validation/useValidationStateEmitter.ts"],
+  "sourcesContent": ["import { useCallback, useRef } from 'react';\n\nimport type { ValidationState } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\n\ntype ValidationStateSignature = {\n  errorKeys: string[];\n  trigger: ValidationState['trigger'];\n};\n\n/**\n * Emits validation changes only when the public validation summary changes.\n *\n * @internal\n */\nexport function useValidationStateEmitter(\n  onValidityChange: ((state: ValidationState) => void) | undefined,\n): (state: ValidationState) => void {\n  const lastSignatureRef = useRef<ValidationStateSignature>();\n  const onValidityChangeCallback = useCallbackRef(onValidityChange);\n\n  return useCallback(\n    (state: ValidationState) => {\n      const lastSignature = lastSignatureRef.current;\n\n      const nextSignature = {\n        errorKeys: state.errors\n          .map((e) => e.validityStateKey.toString())\n          .sort((a, b) => a.localeCompare(b)),\n        trigger: state.trigger,\n      };\n\n      if (lastSignature === undefined && nextSignature.trigger === 'change') {\n        return;\n      }\n\n      const sameErrors =\n        lastSignature !== undefined &&\n        lastSignature.errorKeys.length === nextSignature.errorKeys.length &&\n        lastSignature.errorKeys.every(\n          (key, i) => key === nextSignature.errorKeys[i],\n        );\n\n      if (sameErrors && nextSignature.trigger !== 'manual') {\n        return;\n      }\n\n      lastSignatureRef.current = nextSignature;\n      onValidityChangeCallback(state);\n    },\n    [onValidityChangeCallback],\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,cAAc;AAGpC,SAAS,sBAAsB;AAYxB,SAAS,0BACd,kBACkC;AAClC,QAAM,mBAAmB,OAAiC;AAC1D,QAAM,2BAA2B,eAAe,gBAAgB;AAEhE,SAAO;AAAA,IACL,CAAC,UAA2B;AAC1B,YAAM,gBAAgB,iBAAiB;AAEvC,YAAM,gBAAgB;AAAA,QACpB,WAAW,MAAM,OACd,IAAI,CAAC,MAAM,EAAE,iBAAiB,SAAS,CAAC,EACxC,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AAAA,QACpC,SAAS,MAAM;AAAA,MACjB;AAEA,UAAI,kBAAkB,UAAa,cAAc,YAAY,UAAU;AACrE;AAAA,MACF;AAEA,YAAM,aACJ,kBAAkB,UAClB,cAAc,UAAU,WAAW,cAAc,UAAU,UAC3D,cAAc,UAAU;AAAA,QACtB,CAAC,KAAK,MAAM,QAAQ,cAAc,UAAU,CAAC;AAAA,MAC/C;AAEF,UAAI,cAAc,cAAc,YAAY,UAAU;AACpD;AAAA,MACF;AAEA,uBAAiB,UAAU;AAC3B,+BAAyB,KAAK;AAAA,IAChC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACF;",
+  "names": []
+}

package/esm/forms/validation/validation-builders.js

@@ -0,0 +1,56 @@
+import {
+  NativeValidityStateKeys,
+  StratoValidityStateKeys,
+  ValidationError,
+  ValidityStateKey
+} from "./types.js";
+function getValidityStateKeySource(validityStateKey) {
+  if (Object.values(StratoValidityStateKeys).some(
+    (key) => key.equals(validityStateKey)
+  )) {
+    return "strato";
+  }
+  if (Object.values(NativeValidityStateKeys).some(
+    (key) => key.equals(validityStateKey)
+  )) {
+    return "native";
+  }
+  return "custom";
+}
+function getValidationState(input, trigger, message, formControlId) {
+  if (!input) {
+    return { status: "done", trigger, errors: [] };
+  }
+  if (input instanceof ValidityStateKey) {
+    const validityStateKey = input;
+    const source = getValidityStateKeySource(validityStateKey);
+    return {
+      status: "done",
+      trigger,
+      errors: [
+        new ValidationError(message ?? validityStateKey.value, {
+          source,
+          validityStateKey,
+          formControlId
+        })
+      ]
+    };
+  }
+  const element = input;
+  if (element.validity.valid) {
+    return { status: "done", trigger, errors: [] };
+  }
+  const resolvedMessage = message ?? element.validationMessage;
+  const errors = Object.values(NativeValidityStateKeys).filter((key) => element.validity[key.value]).map(
+    (key) => new ValidationError(resolvedMessage, {
+      source: "native",
+      validityStateKey: key,
+      formControlId: element.id || void 0
+    })
+  );
+  return { status: "done", trigger, errors };
+}
+export {
+  getValidationState
+};
+//# sourceMappingURL=validation-builders.js.map

package/esm/forms/validation/validation-builders.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/validation/validation-builders.ts"],
+  "sourcesContent": ["import {\n  NativeValidityStateKeys,\n  StratoValidityStateKeys,\n  ValidationError,\n  ValidityStateKey,\n} from './types.js';\nimport type {\n  ValidationErrorSource,\n  ValidationState,\n  ValidationTrigger,\n} from './types.js';\n\ntype NativeValidationElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement\n  | null\n  | undefined;\n\ntype ValidationStateInput = NativeValidationElement | ValidityStateKey;\n\nfunction getValidityStateKeySource(\n  validityStateKey: ValidityStateKey,\n): ValidationErrorSource {\n  if (\n    Object.values(StratoValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'strato';\n  }\n\n  if (\n    Object.values(NativeValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'native';\n  }\n\n  return 'custom';\n}\n\n/**\n * Creates a {@link ValidationState} from a source-specific validation result.\n *\n * @remarks\n * When passing a native element, the caller is responsible for triggering\n * validation (e.g. `checkValidity()`) before calling this. Validity keys are\n * classified by comparing against the exported Native and Strato key registries;\n * unknown keys are treated as custom validation errors.\n *\n * @internal\n */\nexport function getValidationState(\n  input: ValidationStateInput,\n  trigger: ValidationTrigger,\n  message?: string,\n  formControlId?: string | string[],\n): ValidationState {\n  if (!input) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  if (input instanceof ValidityStateKey) {\n    const validityStateKey = input;\n    const source = getValidityStateKeySource(validityStateKey);\n\n    return {\n      status: 'done',\n      trigger,\n      errors: [\n        new ValidationError(message ?? validityStateKey.value, {\n          source,\n          validityStateKey,\n          formControlId,\n        }),\n      ],\n    };\n  }\n\n  const element = input;\n\n  if (element.validity.valid) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  const resolvedMessage = message ?? element.validationMessage;\n  const errors = Object.values(NativeValidityStateKeys)\n    .filter((key) => element.validity[key.value])\n    .map(\n      (key) =>\n        new ValidationError(resolvedMessage, {\n          source: 'native',\n          validityStateKey: key,\n          formControlId: element.id || undefined,\n        }),\n    );\n\n  return { status: 'done', trigger, errors };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,0BACP,kBACuB;AACvB,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAaO,SAAS,mBACd,OACA,SACA,SACA,eACiB;AACjB,MAAI,CAAC,OAAO;AACV,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,UAAM,mBAAmB;AACzB,UAAM,SAAS,0BAA0B,gBAAgB;AAEzD,WAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,IAAI,gBAAgB,WAAW,iBAAiB,OAAO;AAAA,UACrD;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAEhB,MAAI,QAAQ,SAAS,OAAO;AAC1B,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,QAAM,kBAAkB,WAAW,QAAQ;AAC3C,QAAM,SAAS,OAAO,OAAO,uBAAuB,EACjD,OAAO,CAAC,QAAQ,QAAQ,SAAS,IAAI,KAAK,CAAC,EAC3C;AAAA,IACC,CAAC,QACC,IAAI,gBAAgB,iBAAiB;AAAA,MACnC,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,eAAe,QAAQ,MAAM;AAAA,IAC/B,CAAC;AAAA,EACL;AAEF,SAAO,EAAE,QAAQ,QAAQ,SAAS,OAAO;AAC3C;",
+  "names": []
+}

package/esm/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-7-1 {
+._8j2khp0-3-8-0 {
   position: relative;
   display: flex;
   align-items: center;

package/esm/layouts/app-header/AppHeader.sty.js

@@ -1,5 +1,5 @@
 import "./AppHeader.css";
-var header = "_8j2khp0-3-7-1";
+var header = "_8j2khp0-3-8-0";
 export {
   header
 };

package/esm/layouts/app-header/AppHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.css.ts"],
-  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-7-1';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/app-header/Logo.js

@@ -6,7 +6,9 @@ import {
 import { getAppName } from "@dynatrace-sdk/app-environment";
 import { AppIcon } from "./app-icon/AppIcon.js";
 import { Button } from "../../buttons/button/Button.js";
-import { ReleasePhaseIndicator } from "../../content/release-phase-indicator/ReleasePhaseIndicator.js";
+import {
+  ReleasePhaseIndicator
+} from "../../content/release-phase-indicator/ReleasePhaseIndicator.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 const Logo = forwardRef(
   (props, ref) => {

package/esm/layouts/app-header/Logo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Logo.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { getAppName } from '@dynatrace-sdk/app-environment';\n\nimport { AppIcon, type AppIconProps } from './app-icon/AppIcon.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { ReleasePhaseIndicator } from '../../content/release-phase-indicator/ReleasePhaseIndicator.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * @public\n */\nexport interface AppHeaderLogoOwnProps\n  extends DataTestId,\n    MaskingProps,\n    StylingProps,\n    AriaLabelingProps,\n    WithChildren {\n  appName?: string;\n  appIcon?: string;\n  href?: string;\n  /**\n   * Indicates the release phase of the app. When set to `'preview'`, a chip\n   * with the text \"Preview\" is shown to the right of the app name.\n   * More release phases will be added in the future.\n   */\n  releasePhase?: 'preview';\n}\n\n// DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n/**\n * @public\n * @deprecated `Logo` replaces `AppNavLink`\n */\nexport interface AppNavLinkInternalOwnProps extends AppHeaderLogoOwnProps {\n  /** Has no effect. Will be deprecated. */\n  pin?: boolean;\n}\n\n/**\n * @public\n */\nexport type AppHeaderLogoProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderLogoOwnProps>;\n\n/**\n * App logo with icon and app name.\n * @public\n */\nexport const Logo: <E extends ElementType = 'a'>(\n  props: AppHeaderLogoProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderLogoProps<E>,\n    ref: typeof props.ref,\n  ) => {\n    const {\n      appIcon,\n      appName,\n      as: propAs,\n      href = '/',\n      className,\n      style,\n      releasePhase,\n      'data-testid': dataTestId,\n      ...rest\n    }: AppHeaderLogoProps<E> = props;\n    const as = propAs ?? 'a';\n    const name = appName ?? getAppName();\n\n    let icon: ReactElement<AppIconProps> | undefined;\n    for (const child of Children.toArray(props.children)) {\n      if (isSlot(child, AppIcon)) {\n        icon = child;\n      }\n    }\n\n    const hasReleasePhaseIndicator = releasePhase !== undefined;\n\n    return (\n      <Button<ElementType>\n        {...rest}\n        data-testid={dataTestId}\n        as={as}\n        ref={ref}\n        href={href}\n        className={className}\n        style={style}\n      >\n        <Button.Prefix>\n          <AppIcon src={appIcon ?? icon?.props.src} alt=\"\" />\n        </Button.Prefix>\n        <Button.Label\n          style={hasReleasePhaseIndicator ? { paddingRight: 0 } : undefined}\n        >\n          {name}\n        </Button.Label>\n        {hasReleasePhaseIndicator ? (\n          <Button.Suffix>\n            <ReleasePhaseIndicator phase={releasePhase} />\n          </Button.Suffix>\n        ) : null}\n      </Button>\n    );\n  },\n);\n\n(Logo as typeof Logo & { displayName: string }).displayName = 'AppHeader.Logo';\n"],
-  "mappings": "AA2FM,SAUI,KAVJ;AA3FN;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,kBAAkB;AAE3B,SAAS,eAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAOtC,SAAS,cAAc;AA0ChB,MAAM,OAEc;AAAA,EACzB,CACE,OACA,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA2B;AAC3B,UAAM,KAAK,UAAU;AACrB,UAAM,OAAO,WAAW,WAAW;AAEnC,QAAI;AACJ,eAAW,SAAS,SAAS,QAAQ,MAAM,QAAQ,GAAG;AACpD,UAAI,OAAO,OAAO,OAAO,GAAG;AAC1B,eAAO;AAAA,MACT;AAAA,IACF;AAEA,UAAM,2BAA2B,iBAAiB;AAElD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,OAAO,QAAP,EACC,8BAAC,WAAQ,KAAK,WAAW,MAAM,MAAM,KAAK,KAAI,IAAG,GACnD;AAAA,UACA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,OAAO,2BAA2B,EAAE,cAAc,EAAE,IAAI;AAAA,cAEvD;AAAA;AAAA,UACH;AAAA,UACC,2BACC,oBAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,OAAO,cAAc,GAC9C,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { getAppName } from '@dynatrace-sdk/app-environment';\n\nimport { AppIcon, type AppIconProps } from './app-icon/AppIcon.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport {\n  ReleasePhaseIndicator,\n  type ReleasePhase,\n} from '../../content/release-phase-indicator/ReleasePhaseIndicator.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * @public\n */\nexport interface AppHeaderLogoOwnProps\n  extends DataTestId,\n    MaskingProps,\n    StylingProps,\n    AriaLabelingProps,\n    WithChildren {\n  appName?: string;\n  appIcon?: string;\n  href?: string;\n  /**\n   * Indicates the release phase of the app. When set, a chip is shown to the\n   * right of the app name indicating the phase (e.g. `'preview'`, `'early-access'`).\n   */\n  releasePhase?: ReleasePhase;\n}\n\n// DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n/**\n * @public\n * @deprecated `Logo` replaces `AppNavLink`\n */\nexport interface AppNavLinkInternalOwnProps extends AppHeaderLogoOwnProps {\n  /** Has no effect. Will be deprecated. */\n  pin?: boolean;\n}\n\n/**\n * @public\n */\nexport type AppHeaderLogoProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderLogoOwnProps>;\n\n/**\n * App logo with icon and app name.\n * @public\n */\nexport const Logo: <E extends ElementType = 'a'>(\n  props: AppHeaderLogoProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderLogoProps<E>,\n    ref: typeof props.ref,\n  ) => {\n    const {\n      appIcon,\n      appName,\n      as: propAs,\n      href = '/',\n      className,\n      style,\n      releasePhase,\n      'data-testid': dataTestId,\n      ...rest\n    }: AppHeaderLogoProps<E> = props;\n    const as = propAs ?? 'a';\n    const name = appName ?? getAppName();\n\n    let icon: ReactElement<AppIconProps> | undefined;\n    for (const child of Children.toArray(props.children)) {\n      if (isSlot(child, AppIcon)) {\n        icon = child;\n      }\n    }\n\n    const hasReleasePhaseIndicator = releasePhase !== undefined;\n\n    return (\n      <Button<ElementType>\n        {...rest}\n        data-testid={dataTestId}\n        as={as}\n        ref={ref}\n        href={href}\n        className={className}\n        style={style}\n      >\n        <Button.Prefix>\n          <AppIcon src={appIcon ?? icon?.props.src} alt=\"\" />\n        </Button.Prefix>\n        <Button.Label\n          style={hasReleasePhaseIndicator ? { paddingRight: 0 } : undefined}\n        >\n          {name}\n        </Button.Label>\n        {hasReleasePhaseIndicator ? (\n          <Button.Suffix>\n            <ReleasePhaseIndicator phase={releasePhase} />\n          </Button.Suffix>\n        ) : null}\n      </Button>\n    );\n  },\n);\n\n(Logo as typeof Logo & { displayName: string }).displayName = 'AppHeader.Logo';\n"],
+  "mappings": "AA6FM,SAUI,KAVJ;AA7FN;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,kBAAkB;AAE3B,SAAS,eAAkC;AAC3C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AAOP,SAAS,cAAc;AAyChB,MAAM,OAEc;AAAA,EACzB,CACE,OACA,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA2B;AAC3B,UAAM,KAAK,UAAU;AACrB,UAAM,OAAO,WAAW,WAAW;AAEnC,QAAI;AACJ,eAAW,SAAS,SAAS,QAAQ,MAAM,QAAQ,GAAG;AACpD,UAAI,OAAO,OAAO,OAAO,GAAG;AAC1B,eAAO;AAAA,MACT;AAAA,IACF;AAEA,UAAM,2BAA2B,iBAAiB;AAElD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,OAAO,QAAP,EACC,8BAAC,WAAQ,KAAK,WAAW,MAAM,MAAM,KAAK,KAAI,IAAG,GACnD;AAAA,UACA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,OAAO,2BAA2B,EAAE,cAAc,EAAE,IAAI;AAAA,cAEvD;AAAA;AAAA,UACH;AAAA,UACC,2BACC,oBAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,OAAO,cAAc,GAC9C,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-7-1 {
+._swz1ff2-3-8-0 {
   position: relative;
 }
-._swz1ff2-3-7-1:is(._swz1ff0-3-7-1,.active):not(._swz1ff1-3-7-1) {
+._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-7-1:is(._swz1ff0-3-7-1,.active):not(._swz1ff1-3-7-1):hover {
+._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-7-1:is(._swz1ff0-3-7-1,.active)::after {
+._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-7-1 {
+._swz1ff3-3-8-0 {
   position: relative;
 }
-._swz1ff3-3-7-1:is(._swz1ff0-3-7-1,.active):not(._swz1ff1-3-7-1) {
+._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-7-1:is(._swz1ff0-3-7-1,.active):not(._swz1ff1-3-7-1):hover {
+._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-7-1:is(._swz1ff0-3-7-1,.active)::after {
+._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-7-1 {
+._swz1ff4-3-8-0 {
   min-width: max-content;
 }

package/esm/layouts/app-header/Navigation.sty.js

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-7-1";
-var inlineNav = "_swz1ff4-3-7-1";
-var isDisabled = "_swz1ff1-3-7-1";
-var isSelected = "_swz1ff0-3-7-1";
-var menuLink = "_swz1ff3-3-7-1";
+var button = "_swz1ff2-3-8-0";
+var inlineNav = "_swz1ff4-3-8-0";
+var isDisabled = "_swz1ff1-3-8-0";
+var isSelected = "_swz1ff0-3-8-0";
+var menuLink = "_swz1ff3-3-8-0";
 export {
   button,
   inlineNav,

package/esm/layouts/app-header/Navigation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.css.ts"],
-  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-7-1';\nexport var inlineNav = '_swz1ff4-3-7-1';\nexport var isDisabled = '_swz1ff1-3-7-1';\nexport var isSelected = '_swz1ff0-3-7-1';\nexport var menuLink = '_swz1ff3-3-7-1';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-8-0';\nexport var inlineNav = '_swz1ff4-3-8-0';\nexport var isDisabled = '_swz1ff1-3-8-0';\nexport var isSelected = '_swz1ff0-3-8-0';\nexport var menuLink = '_swz1ff3-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionButton.css

@@ -1,4 +1,4 @@
-._otmjah0-3-7-1 {
+._otmjah0-3-8-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-7-1:hover {
+._otmjah0-3-8-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   text-decoration: none;
 }
-._otmjah0-3-7-1:active {
+._otmjah0-3-8-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   text-decoration: none;
 }
-._otmjah0-3-7-1:after {
+._otmjah0-3-8-0:after {
   content: " ";
   width: 16px;
   height: 2px;
@@ -34,50 +34,50 @@
   transform: translateX(-50%) translateY(var(--dt-spacings-size-0, 0));
   transition: width var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), opacity var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), transform var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
 }
-._otmjah1-3-7-1._otmjah1-3-7-1 {
+._otmjah1-3-8-0._otmjah1-3-8-0 {
   gap: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._otmjah2-3-7-1._otmjah2-3-7-1 {
+._otmjah2-3-8-0._otmjah2-3-8-0 {
   gap: var(--dt-spacings-size-6, 6px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._otmjah3-3-7-1 {
+._otmjah3-3-8-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-7-1:hover {
+._otmjah3-3-8-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-7-1.active {
+._otmjah4-3-8-0.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-7-1._otmjah3-3-7-1.active {
+._otmjah4-3-8-0._otmjah3-3-8-0.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-7-1:not(._otmjah3-3-7-1).active:hover {
+._otmjah4-3-8-0:not(._otmjah3-3-8-0).active:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
   text-decoration: none;
 }
-._otmjah4-3-7-1:not([role="menuitem"]).active:active {
+._otmjah4-3-8-0:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
   text-decoration: none;
 }
-._otmjah4-3-7-1._otmjah3-3-7-1._otmjah4-3-7-1:not([role="menuitem"]).active:active {
+._otmjah4-3-8-0._otmjah3-3-8-0._otmjah4-3-8-0:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-7-1.active::after {
+._otmjah4-3-8-0.active::after {
   content: " ";
   width: 20px;
   height: 2px;
@@ -90,10 +90,10 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._otmjah4-3-7-1._otmjah3-3-7-1.active::after {
+._otmjah4-3-8-0._otmjah3-3-8-0.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-7-1[role="menuitem"].active::after {
+._otmjah4-3-8-0[role="menuitem"].active::after {
   display: block;
   height: calc(100% - 2 * var(--dt-spacings-size-6, 6px));
   width: var(--dt-spacings-size-2, 2px);
@@ -102,7 +102,7 @@
   transform: translate(4px);
   bottom: unset;
 }
-._otmjah4-3-7-1 a {
+._otmjah4-3-8-0 a {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/esm/layouts/app-header/action-group/ActionButton.sty.js

@@ -1,8 +1,8 @@
 import "./ActionButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabled = "_otmjah3-3-7-1";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-7-1", variantClassNames: { density: { "default": "_otmjah1-3-7-1", condensed: "_otmjah2-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-7-1";
+var disabled = "_otmjah3-3-8-0";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-8-0", variantClassNames: { density: { "default": "_otmjah1-3-8-0", condensed: "_otmjah2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-8-0";
 export {
   disabled,
   navItem,