@dynatrace/strato-components 3.13.3 → 3.14.1

package/content/progress/ProgressBarLabel.sty.js

@@ -22,4 +22,4 @@ __export(ProgressBarLabel_css_exports, {
 module.exports = __toCommonJS(ProgressBarLabel_css_exports);
 var import_ProgressBarLabel_css_ts_vanilla = require("./ProgressBarLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ceb8vp0-3-13-3", variantClassNames: { size: { condensed: "_1ceb8vp1-3-13-3", "default": "_1ceb8vp2-3-13-3" }, childIsText: { false: "_1ceb8vp3-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ceb8vp0-3-14-1", variantClassNames: { size: { condensed: "_1ceb8vp1-3-14-1", "default": "_1ceb8vp2-3-14-1" }, childIsText: { false: "_1ceb8vp3-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });

package/content/progress/ProgressBarValue.css

@@ -1,13 +1,13 @@
-._1ri4i7o0-3-13-3 {
-  color: var(--_13n9uwh4-3-13-3);
+._1ri4i7o0-3-14-1 {
+  color: var(--_13n9uwh4-3-14-1);
 }
-._1ri4i7o2-3-13-3 {
+._1ri4i7o2-3-14-1 {
   word-break: break-word;
 }
-._1ri4i7o4-3-13-3 {
+._1ri4i7o4-3-14-1 {
   word-break: break-word;
 }
-._1ri4i7o5-3-13-3 {
+._1ri4i7o5-3-14-1 {
   margin-left: auto;
   align-self: center;
 }

package/content/progress/ProgressBarValue.sty.js

@@ -24,4 +24,4 @@ var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
 var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
 var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var value = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-3-13-3", variantClassNames: { size: { condensed: "_1ri4i7o1-3-13-3", "default": "_1ri4i7o2-3-13-3" }, childIsText: { true: "_1ri4i7o3-3-13-3", false: "_1ri4i7o4-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-3-13-3 _oqqp1n0-3-13-3"]] });
+var value = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-3-14-1", variantClassNames: { size: { condensed: "_1ri4i7o1-3-14-1", "default": "_1ri4i7o2-3-14-1" }, childIsText: { true: "_1ri4i7o3-3-14-1", false: "_1ri4i7o4-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-3-14-1 _oqqp1n0-3-14-1"]] });

package/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes _kvldjh4-3-13-3 {
+@keyframes _kvldjh4-3-14-1 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,87 +6,95 @@
     transform: rotate(360deg);
   }
 }
-._kvldjh5-3-13-3 {
+._kvldjh5-3-14-1 {
   display: inline-block;
 }
-._kvldjh6-3-13-3 {
-  width: var(--_kvldjh3-3-13-3, 20px);
-  height: var(--_kvldjh3-3-13-3, 20px);
+._kvldjh6-3-14-1 {
+  width: var(--_kvldjh3-3-14-1, 20px);
+  height: var(--_kvldjh3-3-14-1, 20px);
 }
-._kvldjh7-3-13-3 {
-  width: var(--_kvldjh3-3-13-3, 40px);
-  height: var(--_kvldjh3-3-13-3, 40px);
+._kvldjh7-3-14-1 {
+  width: var(--_kvldjh3-3-14-1, 40px);
+  height: var(--_kvldjh3-3-14-1, 40px);
 }
-._kvldjh8-3-13-3 {
+._kvldjh8-3-14-1 {
   display: block;
   transform: rotate(-90deg);
 }
-._kvldjh9-3-13-3 {
-  stroke: var(--_kvldjh2-3-13-3);
+._kvldjh9-3-14-1 {
+  stroke: var(--_kvldjh2-3-14-1);
   transform-origin: center;
 }
-._kvldjha-3-13-3 {
+._kvldjha-3-14-1 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: _kvldjh4-3-13-3;
+  animation-name: _kvldjh4-3-14-1;
   animation-duration: var(--dt-timings-slowest-moderate, 1200ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-._kvldjhb-3-13-3 {
+._kvldjhb-3-14-1 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-._kvldjhc-3-13-3 {
-  stroke: var(--_kvldjh1-3-13-3);
+._kvldjhc-3-14-1 {
+  stroke: var(--_kvldjh1-3-14-1);
 }
-._kvldjhd-3-13-3 {
+._kvldjhd-3-14-1 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--_kvldjh0-3-13-3);
+  color: var(--_kvldjh0-3-14-1);
 }
-._kvldjhe-3-13-3 {
+._kvldjhe-3-14-1 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-._kvldjhf-3-13-3 {
+._kvldjhf-3-14-1 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-._kvldjhg-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-critical-accent, #bb0731);
+._kvldjhg-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._kvldjhh-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-neutral-accent, #595a7d);
+._kvldjhh-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._kvldjhi-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-primary-accent, #464cce);
+._kvldjhi-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._kvldjhj-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-success-accent, #2d6761);
+._kvldjhj-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-success-accent, #2d6761);
 }
-._kvldjhk-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-warning-accent, #855400);
+._kvldjhk-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-warning-accent, #855400);
 }
-._kvldjhl-3-13-3 {
-  --_kvldjh0-3-13-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_kvldjh1-3-13-3: var(--dt-colors-border-neutral-default, #dadbe4);
+._kvldjhl-3-14-1 {
+  --_kvldjh0-3-14-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_kvldjh1-3-14-1: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._kvldjhm-3-13-3 {
-  --_kvldjh0-3-13-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_kvldjh1-3-13-3: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+._kvldjhm-3-14-1 {
+  --_kvldjh0-3-14-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-3-14-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-._kvldjhn-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+._kvldjhn-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
 }
-._kvldjho-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+._kvldjho-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
 }
-._kvldjhp-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-warning-on-accent-default, #272024);
+._kvldjhp-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-warning-on-accent-default, #272024);
 }
-._kvldjhq-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+._kvldjhq-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
 }
-._kvldjhr-3-13-3 {
-  --_kvldjh2-3-13-3: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+._kvldjhr-3-14-1 {
+  --_kvldjh2-3-14-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+@media (prefers-reduced-motion: reduce) {
+  ._kvldjha-3-14-1 {
+    animation: none;
+  }
+  ._kvldjhb-3-14-1 {
+    transition-duration: 0s;
+  }
 }

package/content/progress/ProgressCircle.css.d.ts

@@ -32,10 +32,20 @@ export declare const indicator: import("@vanilla-extract/recipes").RuntimeFn<{
             animationDuration: string;
             animationTimingFunction: "cubic-bezier(0.5, 0.15, 0.5, 0.8)";
             animationIterationCount: "infinite";
+            '@media': {
+                '(prefers-reduced-motion: reduce)': {
+                    animation: "none";
+                };
+            };
         };
         false: {
             animationDuration: string;
             transitionProperty: "stroke-dashoffset";
+            '@media': {
+                '(prefers-reduced-motion: reduce)': {
+                    transitionDuration: "0s";
+                };
+            };
         };
     };
 }>;

package/content/progress/ProgressCircle.sty.js

@@ -27,9 +27,9 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var background = "_kvldjhc-3-13-3";
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjhd-3-13-3", variantClassNames: { size: { small: "_kvldjhe-3-13-3", large: "_kvldjhf-3-13-3" }, color: { critical: "_kvldjhg-3-13-3", neutral: "_kvldjhh-3-13-3", primary: "_kvldjhi-3-13-3", success: "_kvldjhj-3-13-3", warning: "_kvldjhk-3-13-3" }, variant: { "default": "_kvldjhl-3-13-3", accent: "_kvldjhm-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhn-3-13-3"], [{ color: "success", variant: "accent" }, "_kvldjho-3-13-3"], [{ color: "warning", variant: "accent" }, "_kvldjhp-3-13-3"], [{ color: "critical", variant: "accent" }, "_kvldjhq-3-13-3"], [{ color: "neutral", variant: "accent" }, "_kvldjhr-3-13-3"]] });
-var indicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh9-3-13-3", variantClassNames: { indeterminate: { true: "_kvldjha-3-13-3", false: "_kvldjhb-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleSizeVar = "var(--_kvldjh3-3-13-3)";
-var root = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh5-3-13-3", variantClassNames: { size: { small: "_kvldjh6-3-13-3", large: "_kvldjh7-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var svg = "_kvldjh8-3-13-3";
+var background = "_kvldjhc-3-14-1";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjhd-3-14-1", variantClassNames: { size: { small: "_kvldjhe-3-14-1", large: "_kvldjhf-3-14-1" }, color: { critical: "_kvldjhg-3-14-1", neutral: "_kvldjhh-3-14-1", primary: "_kvldjhi-3-14-1", success: "_kvldjhj-3-14-1", warning: "_kvldjhk-3-14-1" }, variant: { "default": "_kvldjhl-3-14-1", accent: "_kvldjhm-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhn-3-14-1"], [{ color: "success", variant: "accent" }, "_kvldjho-3-14-1"], [{ color: "warning", variant: "accent" }, "_kvldjhp-3-14-1"], [{ color: "critical", variant: "accent" }, "_kvldjhq-3-14-1"], [{ color: "neutral", variant: "accent" }, "_kvldjhr-3-14-1"]] });
+var indicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh9-3-14-1", variantClassNames: { indeterminate: { true: "_kvldjha-3-14-1", false: "_kvldjhb-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleSizeVar = "var(--_kvldjh3-3-14-1)";
+var root = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh5-3-14-1", variantClassNames: { size: { small: "_kvldjh6-3-14-1", large: "_kvldjh7-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var svg = "_kvldjh8-3-14-1";

package/content/shared-components/Visual.css

@@ -1,4 +1,4 @@
-._9w5efw0-3-13-3 {
+._9w5efw0-3-14-1 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,13 +11,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._9w5efw0-3-13-3 img, ._9w5efw0-3-13-3 picture, ._9w5efw0-3-13-3 video {
+._9w5efw0-3-14-1 img, ._9w5efw0-3-14-1 picture, ._9w5efw0-3-14-1 video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._9w5efw0-3-13-3 figure {
+._9w5efw0-3-14-1 figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/content/shared-components/Visual.sty.js

@@ -21,4 +21,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var VisualOverlayCSS = "_9w5efw0-3-13-3";
+var VisualOverlayCSS = "_9w5efw0-3-14-1";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-13-3 {
+._1a1ozfd0-3-14-1 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-13-3 {
+._1a1ozfd1-3-14-1 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-13-3 {
+._1a1ozfd2-3-14-1 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-13-3 {
+._1a1ozfd3-3-14-1 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-13-3 stop {
+._1a1ozfd4-3-14-1 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-13-3 {
+._1a1ozfd5-3-14-1 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-13-3 {
+  ._1a1ozfd6-3-14-1 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.sty.js

@@ -26,8 +26,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-13-3", variantClassNames: { variant: { "default": "_1a1ozfd1-3-13-3", rounded: "_1a1ozfd2-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-13-3";
-var skeletonSvgCSS = "_1a1ozfd3-3-13-3";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-13-3";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-13-3";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-14-1", variantClassNames: { variant: { "default": "_1a1ozfd1-3-14-1", rounded: "_1a1ozfd2-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-14-1";
+var skeletonSvgCSS = "_1a1ozfd3-3-14-1";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-14-1";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-14-1";

package/content/terminology-overlay/TerminologyOverlay.js

@@ -81,7 +81,11 @@ const TerminologyOverlayRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pro
   }
   const { children: triggerChildren, ...triggerSlotProps } = slots.trigger?.props ?? {};
   const triggerProps = slots.trigger?.props ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TerminologyOverlayContext.TerminologyOverlayContext.Provider, { value: overlayTriggerProps, children: [
+  const contextValue = {
+    ...overlayTriggerProps,
+    "data-state": overlayState.isOpen ? "open" : "closed"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TerminologyOverlayContext.TerminologyOverlayContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Trigger.Trigger,
       {

package/content/terminology-overlay/TerminologyOverlayContext.d.ts

@@ -5,6 +5,7 @@ interface TerminologyOverlayContextType {
     'aria-expanded'?: boolean | 'true' | 'false';
     'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
     'aria-controls'?: string;
+    'data-state'?: 'open' | 'closed';
     onKeyDown?: (e: KeyboardEvent) => void;
 }
 export declare const TerminologyOverlayContext: import("react").Context<TerminologyOverlayContextType>;

package/content/terminology-overlay/Trigger.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Trigger_exports = {};
 __export(Trigger_exports, {
@@ -31,14 +21,12 @@ __export(Trigger_exports, {
 });
 module.exports = __toCommonJS(Trigger_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_terminology_overlay_constants = require("./terminology-overlay-constants.js");
-var import_TerminologyOverlay_css = require("./TerminologyOverlay.sty.js");
 var import_TerminologyOverlayContext = require("./TerminologyOverlayContext.js");
+var import_InlineButton = require("../../buttons/inline-button/InlineButton.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
-var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -57,38 +45,26 @@ const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
     ...remainingBehavioralTrackingProps
   } = behavioralTrackingProps;
   const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
-  const { focusProps, focusClassName, isFocusVisible } = (0, import_useFocusRing.useFocusRing)({
-    isMinimal: true
-  });
   const overlayTriggerProps = (0, import_react.useContext)(import_TerminologyOverlayContext.TerminologyOverlayContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+    import_InlineButton.InlineButton,
     {
-      className: (0, import_clsx.default)(
-        focusClassName,
-        import_TerminologyOverlay_css.trigger,
-        {
-          "strato-focus-visible": isFocusVisible
-        },
-        consumerClassName
-      ),
-      style: {
-        textDecoration: isFocusVisible ? "none" : void 0,
-        ...consumerStyle
-      },
+      as: "button",
+      id: propId,
+      className: consumerClassName,
+      style: consumerStyle,
       ref: forwardedRef,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       ...(0, import_merge_props.mergeProps)(
         overlayTriggerProps,
-        focusProps,
         ariaLabelingProps,
-        remainingBehavioralTrackingProps
+        { "data-dt-children-name": dataDtName },
+        remainingBehavioralTrackingProps,
+        { "data-dt-component": import_terminology_overlay_constants.COMPONENT_NAME }
       ),
       "aria-haspopup": "dialog",
-      "data-testid": dataTestId,
-      "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow,
-      "data-dt-name": dataDtName,
-      "data-dt-component": import_terminology_overlay_constants.COMPONENT_NAME,
       children
     }
   );

package/core/components/app-root/AppRoot.css

@@ -118,7 +118,7 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
-:root[data-theme="light"]._1jgl8s50-3-13-3 {
+:root[data-theme="light"]._1jgl8s50-3-14-1 {
   --dt-box-shadows-surface-flat-rest: var(--_vr-10);
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
@@ -449,7 +449,7 @@
   --_vr-40: var(--_vr-shadow-1), var(--_vr-shadow-2-40), var(--_vr-shadow-0);
   --_vr-50: var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0);
 }
-:root[data-theme="dark"]._1jgl8s50-3-13-3 {
+:root[data-theme="dark"]._1jgl8s50-3-14-1 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);

package/core/components/app-root/AppRoot.sty.js

@@ -21,4 +21,4 @@ __export(AppRoot_css_exports, {
 });
 module.exports = __toCommonJS(AppRoot_css_exports);
 var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
-var dtVisualRefreshEnabled = "_1jgl8s50-3-13-3";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-14-1";

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

@@ -25,6 +25,7 @@ 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_attempt_focus = require("../../utils/focus-management/attempt-focus.js");
 var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
 var import_get_first_tabbable_child = require("../../utils/focus-management/get-first-tabbable-child.js");
 var import_get_last_tabbable_child = require("../../utils/focus-management/get-last-tabbable-child.js");
@@ -56,12 +57,17 @@ const FocusScope = (props) => {
       };
       const unregister = focusContext.registerScope(scopeRegistration);
       focusContext.setBackgroundInertness(true);
+      let lastFocusedInScope = null;
       const handleFocusIn = (event) => {
-        if (focusContext.getTopScope() !== scopeRegistration) {
+        const { target } = event;
+        if (!(target instanceof Element)) {
+          return;
+        }
+        if (wrapperRef.current?.contains(target)) {
+          lastFocusedInScope = target;
           return;
         }
-        const target = event.target;
-        if (target && wrapperRef.current?.contains(target)) {
+        if (focusContext.getTopScope() !== scopeRegistration) {
           return;
         }
         if ((0, import_is_tabbable.isInInertSubtree)(target)) {
@@ -135,7 +141,22 @@ const FocusScope = (props) => {
       };
       document.addEventListener("focusout", handleFocusOut, true);
       (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current, focusOptions);
+      lastFocusedInScope = null;
+      let reassertFocusTimeout;
+      if (!wrapperRef.current?.contains(document.activeElement)) {
+        reassertFocusTimeout = setTimeout(() => {
+          const wrapper = wrapperRef.current;
+          if (!wrapper || focusContext.getTopScope() !== scopeRegistration || wrapper.contains(document.activeElement)) {
+            return;
+          }
+          if (lastFocusedInScope instanceof HTMLElement && wrapper.contains(lastFocusedInScope) && (0, import_attempt_focus.attemptFocus)(lastFocusedInScope, focusOptionsRef.current)) {
+            return;
+          }
+          (0, import_focus_first_descendant.focusFirstDescendant)(wrapper, focusOptionsRef.current);
+        }, 0);
+      }
       return () => {
+        clearTimeout(reassertFocusTimeout);
         document.removeEventListener("focusin", handleFocusIn, true);
         document.removeEventListener("keydown", handleKeyDown, true);
         document.removeEventListener("focusout", handleFocusOut, true);

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

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

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-13-3";
+var visuallyHidden = "_1xz8nhz0-3-14-1";

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.13.3"
+          version: "3.14.1"
         }
       });
     } 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.13.3"
+          version: "3.14.1"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-13-3 {
+._1rtjj3o0-3-14-1 {
   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-13-3";
+var defaultChartSize = "_1rtjj3o0-3-14-1";