@dynatrace/strato-components 3.4.0 → 3.5.0

package/core/components/app-root/visual-refresh-overrides.js

@@ -43,9 +43,21 @@ const vrBoxShadowAssignments = {
   "--dt-box-shadows-surface-floating-drag": "var(--_vr-50)"
 };
 const vrLightGeneratedOverrides = {
+  "--dt-box-shadows-surface-flat-rest": "0px 0px 0px 1px #3838420d",
+  "--dt-box-shadows-surface-flat-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-flat-active": "0px 0px 0px 1px #3838420d",
+  "--dt-box-shadows-surface-flat-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
+  "--dt-box-shadows-surface-raised-rest": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-raised-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-raised-active": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-raised-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
+  "--dt-box-shadows-surface-floating-rest": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-floating-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 6px 14px -2px #3838423d",
+  "--dt-box-shadows-surface-floating-active": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-floating-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
   "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fff",
-  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #e4e4e7",
-  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dddee1",
+  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eff0f2",
+  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eaeaed",
   "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #3838421f",
   "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
   "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dde8fc",
@@ -73,6 +85,10 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-background-10": "#fafafb",
   "--dt-colors-theme-background-20": "#fff",
   "--dt-colors-theme-background-shell-default": "#f4f4f6",
+  "--dt-colors-theme-background-base-default": "#fafafb",
+  "--dt-colors-theme-background-surface-backdrop": "#38384266",
+  "--dt-colors-theme-background-surface-default": "#fff",
+  "--dt-colors-theme-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-theme-neutral-10": "#f4f4f6",
   "--dt-colors-theme-neutral-20": "#eff0f2",
   "--dt-colors-theme-neutral-30": "#eaeaed",
@@ -119,6 +135,7 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-critical-80": "#cd0022",
   "--dt-colors-theme-critical-90": "#b50019",
   "--dt-colors-background-base-default": "#fafafb",
+  "--dt-colors-background-surface-backdrop": "#38384266",
   "--dt-colors-background-surface-default": "#fff",
   "--dt-colors-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-background-container-neutral-default": "#f4f4f6",
@@ -137,6 +154,9 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-background-container-critical-emphasized": "#faeae9",
   "--dt-colors-background-container-critical-accent": "#e01032",
   "--dt-colors-background-field-neutral-disabled": "#eaeaed80",
+  "--dt-colors-background-field-neutral-default": "#eff0f200",
+  "--dt-colors-background-field-neutral-default-hover": "#eff0f2",
+  "--dt-colors-background-field-neutral-default-active": "#eaeaed",
   "--dt-colors-background-field-neutral-emphasized": "#eaeaed",
   "--dt-colors-background-field-neutral-emphasized-hover": "#e4e4e7",
   "--dt-colors-background-field-neutral-emphasized-active": "#dddee1",
@@ -195,9 +215,9 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-border-neutral-on-accent-default": "#f6f6fa",
   "--dt-colors-border-neutral-on-accent-default-hover": "#f6f6facc",
   "--dt-colors-border-neutral-on-accent-default-active": "#f6f6fa99",
-  "--dt-colors-border-neutral-subdued": "#eff0f2",
-  "--dt-colors-border-neutral-subdued-hover": "#e4e4e7",
-  "--dt-colors-border-neutral-subdued-active": "#dddee1",
+  "--dt-colors-border-neutral-subdued": "#eaeaed",
+  "--dt-colors-border-neutral-subdued-hover": "#dddee1",
+  "--dt-colors-border-neutral-subdued-active": "#d6d7da",
   "--dt-colors-border-primary-disabled": "#e4e4e780",
   "--dt-colors-border-primary-default": "#d1e1fd",
   "--dt-colors-border-primary-default-hover": "#c3d8ff",
@@ -351,7 +371,7 @@ const vrLightColors = {
   "--dt-colors-background-field-neutral-default-active": "var(--dt-colors-theme-neutral-30)"
 };
 const vrLightBoxShadowElements = {
-  "--_vr-shadow-0": "0 0 0 1px #ffffff",
+  "--_vr-shadow-0": "0 0 0 1px var(--dt-colors-border-neutral-subdued)",
   "--_vr-shadow-1": "0 1px 2px 0 color-mix(in srgb, var(--dt-colors-theme-foreground-10) 5%, transparent)",
   "--_vr-shadow-2-20": "0 4px 8px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 7%, transparent)",
   "--_vr-shadow-2-30": "0 5px 11px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 16%, transparent)",
@@ -366,36 +386,51 @@ const vrLightBoxShadowCompositions = {
   "--_vr-50": "var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0)"
 };
 const vrDarkGeneratedOverrides = {
-  "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #16161d",
-  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #3f3f47",
-  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #4b4a52",
-  "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #ffffff4d, inset 0px -1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-surface-flat-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-flat-active": "0px 0px 0px 1px #f0f0f514",
+  "--dt-box-shadows-surface-flat-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-rest": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-active": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-rest": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 10px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-active": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1b1b22",
+  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #292931",
+  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #34343b",
+  "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #ffffff4d, inset 0px 1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1c2d4d",
   "--dt-box-shadows-field-primary-emphasized-hover": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d315a",
   "--dt-box-shadows-field-primary-emphasized-active": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d3667",
-  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #dcedff26, inset 0px -1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #dcedff26, inset 0px 1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-success-emphasized-rest": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1e3b2d",
   "--dt-box-shadows-field-success-emphasized-hover": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1f4332",
   "--dt-box-shadows-field-success-emphasized-active": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #204c38",
-  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #b7f8d633, inset 0px -1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #b7f8d633, inset 0px 1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-warning-emphasized-rest": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #45391d",
   "--dt-box-shadows-field-warning-emphasized-hover": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #52431f",
   "--dt-box-shadows-field-warning-emphasized-active": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e4c20",
-  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #ffedc040, inset 0px -1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #ffedc040, inset 0px 1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-critical-emphasized-rest": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #482220",
   "--dt-box-shadows-field-critical-emphasized-hover": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #532322",
   "--dt-box-shadows-field-critical-emphasized-active": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e2423",
-  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #ffe4e133, inset 0px -1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #ffe4e133, inset 0px 1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-colors-theme-foreground-10": "#f0f0f5",
   "--dt-colors-theme-foreground-20": "#16161d",
   "--dt-colors-theme-background-10": "#1b1b22",
   "--dt-colors-theme-background-20": "#16161d",
   "--dt-colors-theme-background-shell-default": "#141419",
+  "--dt-colors-theme-background-base-default": "#16161d",
+  "--dt-colors-theme-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-theme-background-surface-default": "#1b1b22",
+  "--dt-colors-theme-background-container-neutral-subdued": "#16161d",
   "--dt-colors-theme-neutral-10": "#1f1f26",
   "--dt-colors-theme-neutral-20": "#292931",
   "--dt-colors-theme-neutral-30": "#34343b",
@@ -441,7 +476,10 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-theme-critical-70": "#cd0c2c",
   "--dt-colors-theme-critical-80": "#bb001c",
   "--dt-colors-theme-critical-90": "#a30014",
-  "--dt-colors-background-container-neutral-subdued": "#1b1b22",
+  "--dt-colors-background-base-default": "#16161d",
+  "--dt-colors-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-background-surface-default": "#1b1b22",
+  "--dt-colors-background-container-neutral-subdued": "#16161d",
   "--dt-colors-background-container-neutral-default": "#1f1f26",
   "--dt-colors-background-container-neutral-emphasized": "#292931",
   "--dt-colors-background-container-neutral-accent": "#dbdbe1",
@@ -458,9 +496,9 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-background-container-critical-emphasized": "#3d201f",
   "--dt-colors-background-container-critical-accent": "#cd0c2c",
   "--dt-colors-background-field-neutral-disabled": "#34343b80",
-  "--dt-colors-background-field-neutral-default": "#34343b00",
-  "--dt-colors-background-field-neutral-default-hover": "#3f3f47",
-  "--dt-colors-background-field-neutral-default-active": "#4b4a52",
+  "--dt-colors-background-field-neutral-default": "#29293100",
+  "--dt-colors-background-field-neutral-default-hover": "#292931",
+  "--dt-colors-background-field-neutral-default-active": "#34343b",
   "--dt-colors-background-field-neutral-emphasized": "#34343b",
   "--dt-colors-background-field-neutral-emphasized-hover": "#3f3f47",
   "--dt-colors-background-field-neutral-emphasized-active": "#4b4a52",
@@ -519,9 +557,9 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-border-neutral-on-accent-default": "#0b0b0f",
   "--dt-colors-border-neutral-on-accent-default-hover": "#0b0b0fcc",
   "--dt-colors-border-neutral-on-accent-default-active": "#0b0b0f99",
-  "--dt-colors-border-neutral-subdued": "#292931",
-  "--dt-colors-border-neutral-subdued-hover": "#3f3f47",
-  "--dt-colors-border-neutral-subdued-active": "#4b4a52",
+  "--dt-colors-border-neutral-subdued": "#34343b",
+  "--dt-colors-border-neutral-subdued-hover": "#4b4a52",
+  "--dt-colors-border-neutral-subdued-active": "#56565e",
   "--dt-colors-border-primary-disabled": "#3f3f4780",
   "--dt-colors-border-primary-default": "#1d315a",
   "--dt-colors-border-primary-default-hover": "#1d3667",

package/core/components/focus-scope/FocusScope.js

@@ -24,19 +24,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_useActiveElement = require("../../hooks/useActiveElement.js");
 var import_useFocusContext = require("../../hooks/useFocusContext.js");
+var import_useModality = require("../../hooks/useModality.js");
 var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
 const FocusScope = (props) => {
   const { autoFocus, contain, children, "data-testid": dataTestId } = props;
   const focusContext = (0, import_useFocusContext.useFocusContext)();
+  const modality = (0, import_useModality.useModality)();
   const wrapperRef = (0, import_react.useRef)(null);
   const focusedElement = (0, import_useActiveElement.useActiveElement)();
   const triggerElement = (0, import_react.useRef)(focusedElement);
   let focusOptions;
-  if (focusContext.modality === "keyboard") {
+  if (modality === "keyboard") {
     focusOptions = { focusVisible: true };
   } else if (
     // If the modality is pointer or touch, we want to focus the first focusable element but not show the focus ring.
-    focusContext.modality === "pointer" || focusContext.modality === "touch"
+    modality === "pointer" || modality === "touch"
   ) {
     focusOptions = { focusVisible: false };
   }

package/core/components/visually-hidden/VisuallyHidden.css

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-4-0 {
+._1xz8nhz0-3-5-0 {
   width: 0;
   height: 0;
   opacity: 0;

package/core/components/visually-hidden/VisuallyHidden.js

@@ -39,7 +39,8 @@ const VisuallyHidden = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     children,
     className: consumerClassName,
     style: consumerStyle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    ...remainingProps
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -48,6 +49,7 @@ const VisuallyHidden = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       className: (0, import_clsx.default)(consumerClassName, styles.visuallyHidden),
       style: consumerStyle,
       "data-testid": dataTestId,
+      ...remainingProps,
       children
     }
   );

package/core/components/visually-hidden/VisuallyHidden.sty.js

@@ -21,4 +21,4 @@ __export(VisuallyHidden_css_exports, {
 });
 module.exports = __toCommonJS(VisuallyHidden_css_exports);
 var import_VisuallyHidden_css_ts_vanilla = require("./VisuallyHidden.css");
-var visuallyHidden = "_1xz8nhz0-3-4-0";
+var visuallyHidden = "_1xz8nhz0-3-5-0";

package/core/contexts/FocusContext.d.ts

@@ -1,21 +1,14 @@
-/**
- * Type defining the modality options for the focus handling.
- * @internal
- */
-export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
 /**
  * Defines the contents of the FocusContext.
  * @internal
  */
 export type FocusContextProps = {
     backgroundInertness?: boolean;
-    modality: Modality;
     setBackgroundInertness: (value: boolean) => void;
     focusTriggerElement: (value: HTMLElement | undefined) => void;
 };
 /**
  * This context keeps all information needed for proper focus management.
- * @param modality - currently used pointer device
  * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)
  * @param setBackgroundInertness - updates the backgrounds active status
  * @internal

package/core/contexts/FocusContext.js

@@ -22,7 +22,6 @@ __export(FocusContext_exports, {
 module.exports = __toCommonJS(FocusContext_exports);
 var import_react = require("react");
 const FocusContext = (0, import_react.createContext)({
-  modality: "unknown",
   backgroundInertness: void 0,
   setBackgroundInertness: (value) => null,
   focusTriggerElement: (value) => null

package/core/dql/dql-common.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Taken from the latest DQL release in the artifactory
+ * Exported only for testing purposes.
+ */
+export declare const dqlCommands: string[];
+export declare const sortedDqlCommands: string[];
+/**
+ * Matches a parameter name in DQL, which is defined as a word followed by a colon.
+ * For example, in `scanLimitGb: 1`, `scanLimitGb` would be matched as a parameter name.
+ * It does not include the colon in the match, so only the parameter name is highlighted.
+ */
+export declare const parameterNamePattern: RegExp;
+/**
+ * Matches boolean literals in DQL, which are `true`, `false`, `TRUE`, and `FALSE`.
+ * The word boundaries ensure that we only match standalone boolean literals, and not parts
+ * of other words (e.g., it won't match the 'true' in 'trueValue').
+ */
+export declare const booleanLiteralPattern: RegExp;
+export declare const combinedDurationUnits: string[];
+/**
+ * Regex pattern to match an optional duration or calendar unit suffix in DQL numeric literals.
+ */
+export declare const dqlUnitSuffixPattern: string;

package/core/dql/dql-common.js

@@ -0,0 +1,116 @@
+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 dql_common_exports = {};
+__export(dql_common_exports, {
+  booleanLiteralPattern: () => booleanLiteralPattern,
+  combinedDurationUnits: () => combinedDurationUnits,
+  dqlCommands: () => dqlCommands,
+  dqlUnitSuffixPattern: () => dqlUnitSuffixPattern,
+  parameterNamePattern: () => parameterNamePattern,
+  sortedDqlCommands: () => sortedDqlCommands
+});
+module.exports = __toCommonJS(dql_common_exports);
+const dqlCommands = [
+  "aggregate",
+  "append",
+  "data",
+  "dedup",
+  "describe",
+  "expand",
+  "experimentalFieldsSummary",
+  "experimentalLoad",
+  "experimentalSave",
+  "experimentalTimeChart",
+  "failIf",
+  "fetch",
+  "fields",
+  "fieldsAdd",
+  "fieldsFlatten",
+  "fieldsKeep",
+  "fieldsRemove",
+  "fieldsRename",
+  "fieldsSnapshot",
+  "fieldsSummary",
+  "filter",
+  "filterOut",
+  "group",
+  "internalTimeseriesBins",
+  "join",
+  "joinNested",
+  "limit",
+  "load",
+  "lookup",
+  "makeTimeseries",
+  "parse",
+  "search",
+  "smartscapeEdges",
+  "smartscapeNodes",
+  "sort",
+  "summarize",
+  "timeseries",
+  "traverse"
+];
+const sortedDqlCommands = dqlCommands.toSorted(
+  (a, b) => b.length - a.length
+);
+const parameterNamePattern = /\w+\s*(?=:)/;
+const booleanLiteralPattern = /\b(?:true|false)\b/i;
+const dqlDurationUnits = [
+  "minutes",
+  "minute",
+  "hours",
+  "hour",
+  "mins",
+  "secs",
+  "hrs",
+  "min",
+  "sec",
+  "ms",
+  "ns",
+  "us",
+  "hr",
+  "h",
+  "s",
+  "m"
+];
+const dqlCalendarDurationUnits = [
+  "quarters",
+  "quarter",
+  "months",
+  "weeks",
+  "years",
+  "month",
+  "qtrs",
+  "week",
+  "year",
+  "days",
+  "day",
+  "qtr",
+  "yrs",
+  "yr",
+  "M",
+  "w",
+  "d",
+  "q",
+  "y"
+];
+const combinedDurationUnits = [
+  ...dqlDurationUnits,
+  ...dqlCalendarDurationUnits
+];
+const dqlUnitSuffixPattern = `(?:${combinedDurationUnits.join("|")})`;

package/core/hooks/useModality.d.ts

@@ -0,0 +1,8 @@
+import { type Modality } from '../utils/modality.js';
+/**
+ * Hook to subscribe to the current input modality and only re-render the component when it changes.
+ *
+ * @returns The current input modality
+ * @internal
+ */
+export declare function useModality(): Modality;

package/core/hooks/useModality.js

@@ -0,0 +1,31 @@
+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 useModality_exports = {};
+__export(useModality_exports, {
+  useModality: () => useModality
+});
+module.exports = __toCommonJS(useModality_exports);
+var import_react = require("react");
+var import_modality = require("../utils/modality.js");
+function useModality() {
+  const modality = (0, import_react.useSyncExternalStore)(
+    import_modality.modalityStore.subscribe,
+    import_modality.modalityStore.getState
+  );
+  return modality;
+}

package/core/index.d.ts

@@ -1,7 +1,7 @@
 export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';
-export { visualRefreshEnabled as _visualRefreshEnabled } from './components/app-root/AppRoot.sty.js';
+export { dtVisualRefreshEnabled as _dtVisualRefreshEnabled } from './components/app-root/AppRoot.sty.js';
 export { FocusScope, type FocusScopeProps, } from './components/focus-scope/FocusScope.js';
-export type { FocusContextProps as _FocusContextProps, Modality as _Modality, } from './contexts/FocusContext.js';
+export type { FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
 export { type UseFocusRingProps, type FocusRingProps, useFocusRing, } from './styles/useFocusRing.js';

package/core/index.js

@@ -40,6 +40,7 @@ __export(core_exports, {
   _downloadBlob: () => import_download.downloadBlob,
   _downloadCSV: () => import_download.downloadCSV,
   _downloadFromUrl: () => import_download.downloadFromUrl,
+  _dtVisualRefreshEnabled: () => import_AppRoot_css.dtVisualRefreshEnabled,
   _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
   _formatDate: () => import_default_formatters.formatDatetimeDefault,
   _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,
@@ -61,7 +62,6 @@ __export(core_exports, {
   _useRequestAnimationFrame: () => import_useRequestAnimationFrame.useRequestAnimationFrame,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
   _useSharedInputPropsContext: () => import_useSharedInputPropsContext.useSharedInputPropsContext,
-  _visualRefreshEnabled: () => import_AppRoot_css.visualRefreshEnabled,
   createStore: () => import_store.createStore,
   getThresholdColor: () => import_threshold_utils.getThresholdColor,
   isNumber: () => import_type_guards.isNumber,

package/core/providers/FocusProvider.js

@@ -26,70 +26,10 @@ var import_FocusContext = require("../contexts/FocusContext.js");
 var import_useFocusContext = require("../hooks/useFocusContext.js");
 var import_get_inert_value = require("../utils/get-inert-value.js");
 var import_merge_props = require("../utils/merge-props.js");
-const ignoreMap = [
-  "Alt",
-  "AltGraph",
-  "CapsLock",
-  "Control",
-  "FnLock",
-  "Fn",
-  "Hyper",
-  "Meta",
-  // Command (Mac), in some browsers also Windows-key
-  "NumLock",
-  "OS",
-  // Windows-key
-  "ScrollLock",
-  "Super",
-  // Virtual keyboard key
-  "Symbol",
-  "SymbolLock"
-];
-const eventTypeMap = {
-  keydown: "keyboard",
-  keyup: "keyboard",
-  mousedown: "mouse",
-  mousemove: "mouse",
-  MSPointerDown: "pointer",
-  MSPointerMove: "pointer",
-  pointerdown: "pointer",
-  pointermove: "pointer",
-  touchstart: "touch",
-  touchend: "touch",
-  wheel: "wheel"
-};
-const navigationalKeys = [
-  "Tab",
-  "Esc",
-  "Escape",
-  " ",
-  "ArrowDown",
-  "Down",
-  "ArrowUp",
-  "Up",
-  "ArrowLeft",
-  "Left",
-  "ArrowRight",
-  "Right",
-  "End",
-  "Home",
-  "PageDown",
-  "PageUp"
-];
 const FocusProvider = ({ children }) => {
   const [backgroundInertness, setBackgroundInertness] = (0, import_react.useState)(false);
   const focusContext = (0, import_useFocusContext.useFocusContext)();
-  const [modality, setModality] = (0, import_react.useState)("unknown");
   const wrapperRef = (0, import_react.useRef)(null);
-  const setKeyboardInputModality = (0, import_react.useCallback)((event) => {
-    if (ignoreMap.includes(event.key)) {
-      setModality("pointer");
-      return;
-    }
-    if (!event.target || navigationalKeys.includes(event.key)) {
-      setModality("keyboard");
-    }
-  }, []);
   const focusTriggerElement = (0, import_react.useCallback)((ref) => {
     if (wrapperRef.current?.getAttribute("inert") === null) {
       ref?.focus();
@@ -113,33 +53,6 @@ const FocusProvider = ({ children }) => {
       }, 5e3);
     }
   }, []);
-  const setMouseInputModality = (0, import_react.useCallback)((event) => {
-    switch (eventTypeMap[event.type]) {
-      case "touch":
-      case "pen":
-        return setModality("touch");
-      case "mouse":
-      case "pointer":
-      case "wheel":
-        return setModality("pointer");
-      default:
-        return "unknown";
-    }
-  }, []);
-  (0, import_react.useEffect)(() => {
-    window.addEventListener("pointerdown", setMouseInputModality);
-    window.addEventListener("keydown", setKeyboardInputModality, {
-      capture: true
-    });
-    window.addEventListener("wheel", setMouseInputModality);
-    return () => {
-      window.removeEventListener("pointerdown", setMouseInputModality);
-      window.removeEventListener("keydown", setKeyboardInputModality, {
-        capture: true
-      });
-      window.removeEventListener("wheel", setMouseInputModality);
-    };
-  }, [setKeyboardInputModality, setMouseInputModality]);
   const focusProps = backgroundInertness ? {
     inert: (0, import_get_inert_value.getProperInertValue)(true),
     tabIndex: -1,
@@ -152,7 +65,6 @@ const FocusProvider = ({ children }) => {
         ...(0, import_merge_props.mergeProps)(focusContext, {
           backgroundInertness,
           setBackgroundInertness,
-          modality,
           focusTriggerElement
         })
       },

package/core/sdk/sdk-logger.js

@@ -40,7 +40,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.4.0"
+          version: "3.5.0"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -48,7 +48,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.4.0"
+          version: "3.5.0"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-4-0 {
+._1rtjj3o0-3-5-0 {
   line-height: normal;
   width: inherit;
 }

package/core/styles/defaultChartValues.sty.js

@@ -21,4 +21,4 @@ __export(defaultChartValues_css_exports, {
 });
 module.exports = __toCommonJS(defaultChartValues_css_exports);
 var import_defaultChartValues_css_ts_vanilla = require("./defaultChartValues.css");
-var defaultChartSize = "_1rtjj3o0-3-4-0";
+var defaultChartSize = "_1rtjj3o0-3-5-0";