@dynatrace/strato-components 3.5.2 → 3.6.0

package/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -37,18 +37,18 @@ module.exports = __toCommonJS(SidebarLayout_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_focusRingStatic_css_ts_vanilla = require("../../../core/styles/focusRingStatic.css");
 var import_SidebarLayout_css_ts_vanilla = require("./SidebarLayout.css");
-var collapseButton = "_1mr4xg7f-3-5-2 _1mr4xg7e-3-5-2";
-var collapseButtonContainer = "_1mr4xg7c-3-5-2";
-var collapsedSidebar = "_1mr4xg75-3-5-2";
-var collapsedSidebarWrapper = "_1mr4xg71-3-5-2";
-var content = "_1mr4xg73-3-5-2";
-var drawer = "_1mr4xg77-3-5-2";
-var drawerContent = "_1mr4xg79-3-5-2";
-var drawerContentContainer = "_1mr4xg78-3-5-2";
-var drawerHeader = "_1mr4xg7a-3-5-2";
-var expandButton = "_1mr4xg7g-3-5-2 _1mr4xg7e-3-5-2";
-var expandButtonContainer = "_1mr4xg7d-3-5-2";
-var hint = "_1mr4xg76-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9bc-3-5-2";
-var layoutRoot = "_1mr4xg70-3-5-2";
-var panel = "_1mr4xg72-3-5-2";
-var resizeHandle = "_1mr4xg74-3-5-2";
+var collapseButton = "_1mr4xg7f-3-6-0 _1mr4xg7e-3-6-0";
+var collapseButtonContainer = "_1mr4xg7c-3-6-0";
+var collapsedSidebar = "_1mr4xg75-3-6-0";
+var collapsedSidebarWrapper = "_1mr4xg71-3-6-0";
+var content = "_1mr4xg73-3-6-0";
+var drawer = "_1mr4xg77-3-6-0";
+var drawerContent = "_1mr4xg79-3-6-0";
+var drawerContentContainer = "_1mr4xg78-3-6-0";
+var drawerHeader = "_1mr4xg7a-3-6-0";
+var expandButton = "_1mr4xg7g-3-6-0 _1mr4xg7e-3-6-0";
+var expandButtonContainer = "_1mr4xg7d-3-6-0";
+var hint = "_1mr4xg76-3-6-0 _z0fq9b4-3-6-0 _z0fq9bd-3-6-0 _z0fq9b6-3-6-0 _z0fq9bc-3-6-0";
+var layoutRoot = "_1mr4xg70-3-6-0";
+var panel = "_1mr4xg72-3-6-0";
+var resizeHandle = "_1mr4xg74-3-6-0";

package/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-5-2 {
+._6q8dk20-3-6-0 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-5-2 {
+._6q8dk21-3-6-0 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,21 +13,21 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-5-2 {
+._6q8dk22-3-6-0 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-5-2 {
+._6q8dk23-3-6-0 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-5-2 {
+._6q8dk24-3-6-0 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._1jgl8s50-3-5-2 ._6q8dk24-3-5-2 {
+._1jgl8s50-3-6-0 ._6q8dk24-3-6-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   background-image: linear-gradient(var(--dt-colors-border-neutral-subdued, #e4e5eb), var(--dt-colors-border-neutral-subdued, #e4e5eb));
   background-size: var(--dt-borders-width-default, 1px) 100%;
@@ -39,23 +39,23 @@
   left: 0;
   transition: none;
 }
-._1jgl8s50-3-5-2 ._6q8dk24-3-5-2:hover {
+._1jgl8s50-3-6-0 ._6q8dk24-3-6-0:hover {
   background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-hover, #d0d1dc), var(--dt-colors-border-neutral-subdued-hover, #d0d1dc));
 }
-._1jgl8s50-3-5-2 ._6q8dk24-3-5-2:active {
+._1jgl8s50-3-6-0 ._6q8dk24-3-6-0:active {
   background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
 }
-._6q8dk25-3-5-2 {
+._6q8dk25-3-6-0 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-5-2 > * {
+._6q8dk25-3-6-0 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-5-2 {
+._6q8dk26-3-6-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -68,17 +68,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._6q8dk26-3-5-2:focus-visible {
+._6q8dk26-3-6-0:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-5-2:hover._6q8dk26-3-5-2:focus-visible {
+._6q8dk26-3-6-0:hover._6q8dk26-3-6-0:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-5-2:focus-visible, ._6q8dk26-3-5-2:hover {
+._6q8dk26-3-6-0:focus-visible, ._6q8dk26-3-6-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-5-2:after {
+._6q8dk26-3-6-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -89,11 +89,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-5-2 ._6q8dk26-3-5-2 {
+._1jgl8s50-3-6-0 ._6q8dk26-3-6-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-5-2 ._6q8dk24-3-5-2:has(._6q8dk26-3-5-2:focus-visible) {
+._1jgl8s50-3-6-0 ._6q8dk24-3-6-0:has(._6q8dk26-3-6-0:focus-visible) {
   background-image: linear-gradient(var(--dt-colors-border-neutral-accent, #595a7d), var(--dt-colors-border-neutral-accent, #595a7d));
   background-size: var(--dt-borders-width-emphasized, 2px) 100%;
 }

package/layouts/split-layout/SplitLayout.sty.js

@@ -28,10 +28,10 @@ __export(SplitLayout_css_exports, {
 module.exports = __toCommonJS(SplitLayout_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_SplitLayout_css_ts_vanilla = require("./SplitLayout.css");
-var column = "_6q8dk21-3-5-2";
-var contentShellContainer = "_6q8dk23-3-5-2 _6q8dk21-3-5-2";
-var handleColumn = "_6q8dk24-3-5-2 _6q8dk21-3-5-2";
-var handleDecorations = "_6q8dk25-3-5-2";
-var layout = "_6q8dk20-3-5-2";
-var panelShellContainer = "_6q8dk22-3-5-2 _6q8dk21-3-5-2";
-var resizeHandle = "_6q8dk26-3-5-2";
+var column = "_6q8dk21-3-6-0";
+var contentShellContainer = "_6q8dk23-3-6-0 _6q8dk21-3-6-0";
+var handleColumn = "_6q8dk24-3-6-0 _6q8dk21-3-6-0";
+var handleDecorations = "_6q8dk25-3-6-0";
+var layout = "_6q8dk20-3-6-0";
+var panelShellContainer = "_6q8dk22-3-6-0 _6q8dk21-3-6-0";
+var resizeHandle = "_6q8dk26-3-6-0";

package/layouts/surface/Surface.css

@@ -1,86 +1,86 @@
-._1qto6jt6-3-5-2 {
-  --_1igzksy0-3-5-2: var(--dt-borders-radius-surface-default, 12px);
+._1qto6jt6-3-6-0 {
+  --_1igzksy0-3-6-0: var(--dt-borders-radius-surface-default, 12px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-align: left;
   border: none;
   outline: none;
   position: relative;
   background-color: var(--dt-colors-background-surface-default, #fff);
-  border-radius: var(--_1igzksy0-3-5-2);
+  border-radius: var(--_1igzksy0-3-6-0);
 }
-._1qto6jt6-3-5-2::before, ._1qto6jt6-3-5-2::after {
+._1qto6jt6-3-6-0::before, ._1qto6jt6-3-6-0::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-5-2);
+  border-radius: var(--_1igzksy0-3-6-0);
   pointer-events: none;
 }
-._1qto6jt6-3-5-2::after {
+._1qto6jt6-3-6-0::after {
   outline-offset: 2px;
-  outline: 2px solid var(--_17bwkb02-3-5-2);
-  opacity: var(--_1qto6jt4-3-5-2);
-  transition: var(--_1qto6jt5-3-5-2);
+  outline: 2px solid var(--_17bwkb02-3-6-0);
+  opacity: var(--_1qto6jt4-3-6-0);
+  transition: var(--_1qto6jt5-3-6-0);
 }
-._1qto6jt7-3-5-2 {
-  --_1qto6jt4-3-5-2: 1;
-  --_1qto6jt5-3-5-2: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
+._1qto6jt7-3-6-0 {
+  --_1qto6jt4-3-6-0: 1;
+  --_1qto6jt5-3-6-0: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt8-3-5-2 {
-  --_1qto6jt4-3-5-2: 0;
-  --_1qto6jt5-3-5-2: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
+._1qto6jt8-3-6-0 {
+  --_1qto6jt4-3-6-0: 0;
+  --_1qto6jt5-3-6-0: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
 }
-._1qto6jt9-3-5-2 {
-  --_1qto6jt1-3-5-2: 0;
-  --_1qto6jt2-3-5-2: pointer;
-  --_1qto6jt3-3-5-2: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jt9-3-6-0 {
+  --_1qto6jt1-3-6-0: 0;
+  --_1qto6jt2-3-6-0: pointer;
+  --_1qto6jt3-3-6-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-5-2);
+  border-radius: var(--_1igzksy0-3-6-0);
   pointer-events: none;
 }
-._1qto6jt9-3-5-2::after,._1qto6jt9-3-5-2::before {
+._1qto6jt9-3-6-0::after,._1qto6jt9-3-6-0::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-5-2);
+  border-radius: var(--_1igzksy0-3-6-0);
   pointer-events: none;
   transition: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt9-3-5-2::after {
-  box-shadow: var(--_1qto6jt0-3-5-2);
-  opacity: var(--_1qto6jt1-3-5-2);
+._1qto6jt9-3-6-0::after {
+  box-shadow: var(--_1qto6jt0-3-6-0);
+  opacity: var(--_1qto6jt1-3-6-0);
 }
-._1qto6jt9-3-5-2::before {
-  box-shadow: var(--_1qto6jt3-3-5-2);
+._1qto6jt9-3-6-0::before {
+  box-shadow: var(--_1qto6jt3-3-6-0);
   opacity: 0;
 }
-._1qto6jta-3-5-2 {
-  --_1qto6jt0-3-5-2: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-5-2: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jta-3-6-0 {
+  --_1qto6jt0-3-6-0: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-6-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d);
 }
-._1qto6jtb-3-5-2 {
-  --_1qto6jt0-3-5-2: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-5-2: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+._1qto6jtb-3-6-0 {
+  --_1qto6jt0-3-6-0: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-6-0: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   box-shadow: var(--dt-box-shadows-surface-raised-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
 }
-._1qto6jtc-3-5-2 {
-  --_1qto6jt0-3-5-2: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-5-2: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+._1qto6jtc-3-6-0 {
+  --_1qto6jt0-3-6-0: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-6-0: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1qto6jtd-3-5-2 {
-  --_1qto6jt1-3-5-2: 1;
-  --_1qto6jt2-3-5-2: grab;
+._1qto6jtd-3-6-0 {
+  --_1qto6jt1-3-6-0: 1;
+  --_1qto6jt2-3-6-0: grab;
 }
 button.strato-surface:not(:disabled), a.strato-surface:not(:disabled) {
   cursor: pointer;

package/layouts/surface/Surface.sty.js

@@ -24,5 +24,5 @@ module.exports = __toCommonJS(Surface_css_exports);
 var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
 var import_Surface_css_ts_vanilla = require("./Surface.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var pseudoElement = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1qto6jt9-3-5-2", variantClassNames: { elevation: { flat: "_1qto6jta-3-5-2", raised: "_1qto6jtb-3-5-2", floating: "_1qto6jtc-3-5-2" }, dragged: { true: "_1qto6jtd-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1qto6jt6-3-5-2", variantClassNames: { selected: { true: "_1qto6jt7-3-5-2", false: "_1qto6jt8-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1qto6jt9-3-6-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-6-0", raised: "_1qto6jtb-3-6-0", floating: "_1qto6jtc-3-6-0" }, dragged: { true: "_1qto6jtd-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1qto6jt6-3-6-0", variantClassNames: { selected: { true: "_1qto6jt7-3-6-0", false: "_1qto6jt8-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/layouts/surface/variables.sty.js

@@ -20,4 +20,4 @@ __export(variables_css_exports, {
   surfaceBorderRadius: () => surfaceBorderRadius
 });
 module.exports = __toCommonJS(variables_css_exports);
-var surfaceBorderRadius = "var(--_1igzksy0-3-5-2)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-6-0)";

package/layouts/title-bar/TitleBar.css

@@ -1,21 +1,21 @@
-._wcwjv20-3-5-2 {
+._wcwjv20-3-6-0 {
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._wcwjv21-3-5-2 {
+._wcwjv21-3-6-0 {
   width: clamp(400px, 400px, 100%);
 }
-._wcwjv22-3-5-2 {
+._wcwjv22-3-6-0 {
   flex-grow: 1;
   align-self: center;
   min-width: 0;
 }
-._wcwjv23-3-5-2 {
+._wcwjv23-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._wcwjv24-3-5-2 {
+._wcwjv24-3-6-0 {
   max-width: 100%;
 }

package/layouts/title-bar/TitleBar.sty.js

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(TitleBar_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_TitleBar_css_ts_vanilla = require("./TitleBar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var navigationWrapperCSS = "_wcwjv22-3-5-2";
-var subtitleCSS = "_wcwjv23-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";
-var suffixWrapperCSS = "_wcwjv24-3-5-2";
-var titleSubtitleWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_wcwjv20-3-5-2", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-6-0";
+var subtitleCSS = "_wcwjv23-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";
+var suffixWrapperCSS = "_wcwjv24-3-6-0";
+var titleSubtitleWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_wcwjv20-3-6-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-5-2 {
+._hw98ku0-3-6-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-5-2 {
+._hw98ku1-3-6-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-5-2 {
+._hw98ku2-3-6-0 {
   overflow: hidden;
 }
-._hw98ku3-3-5-2 {
+._hw98ku3-3-6-0 {
   overflow: visible;
 }
-._hw98ku4-3-5-2 {
+._hw98ku4-3-6-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-5-2 {
+._hw98ku5-3-6-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-5-2 {
+._hw98ku6-3-6-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-5-2 {
+._hw98ku7-3-6-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-5-2 {
+._hw98ku8-3-6-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -26,8 +26,8 @@ __export(Breadcrumbs_css_exports, {
 module.exports = __toCommonJS(Breadcrumbs_css_exports);
 var import_Breadcrumbs_css_ts_vanilla = require("./Breadcrumbs.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var breadcrumbsContainerCSS = "_hw98ku0-3-5-2";
-var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-5-2", variantClassNames: { disabled: { true: "_hw98ku6-3-5-2" }, isLastItem: { true: "_hw98ku7-3-5-2" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-5-2";
-var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-5-2", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-5-2", false: "_hw98ku3-3-5-2" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-5-2";
+var breadcrumbsContainerCSS = "_hw98ku0-3-6-0";
+var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-6-0", variantClassNames: { disabled: { true: "_hw98ku6-3-6-0" }, isLastItem: { true: "_hw98ku7-3-6-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-6-0";
+var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-6-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-6-0", false: "_hw98ku3-3-6-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-6-0";

package/navigation/menu/Content.js

@@ -87,8 +87,6 @@ const Content = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
       style: { zIndex: style.zIndex },
       onKeyDown: handleOnKeyDown,
       collisionBoundary,
-      onPointerDownCapture: (e) => e.stopPropagation(),
-      onPointerUpCapture: (e) => e.stopPropagation(),
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       children

package/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-5-2 {
+._1m01arl1-3-6-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   padding: var(--dt-spacings-size-8, 8px);
   max-width: 500px;
 }
-._1m01arl2-3-5-2 {
+._1m01arl2-3-6-0 {
   box-sizing: border-box;
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -18,13 +18,13 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   text-align: left;
 }
-._1m01arl0-3-5-2 ._1m01arl2-3-5-2 {
+._1m01arl0-3-6-0 ._1m01arl2-3-6-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._1m01arl3-3-5-2 {
+._1m01arl3-3-6-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -34,13 +34,13 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-5-2 ._1m01arl4-3-5-2:not(:last-child) {
+._1m01arl3-3-6-0 ._1m01arl4-3-6-0:not(:last-child) {
   width: 100%;
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-5-2 {
+._1m01arl5-3-6-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +56,35 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-5-2 {
+._1m01arl6-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-5-2:hover, ._1m01arl7-3-5-2[data-state="open"] {
+._1m01arl7-3-6-0:hover, ._1m01arl7-3-6-0[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-5-2:focus {
+._1m01arl7-3-6-0:focus {
   outline: none;
 }
-._1m01arl7-3-5-2:active {
+._1m01arl7-3-6-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-5-2 {
+._1m01arl8-3-6-0 {
   width: 100%;
 }
-._1m01arl5-3-5-2 > ._1m01arl8-3-5-2:first-child {
+._1m01arl5-3-6-0 > ._1m01arl8-3-6-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-5-2 > ._1m01arl8-3-5-2:last-child:not(:has(svg:last-child)) {
+._1m01arl5-3-6-0 > ._1m01arl8-3-6-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-5-2 {
+._1m01arl9-3-6-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-5-2:first-child {
+._1m01arl9-3-6-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }

package/navigation/menu/Menu.js

@@ -28,6 +28,7 @@ var import_constants = require("./constants.js");
 var import_Content = require("./Content.js");
 var import_MenuContext = require("./contexts/MenuContext.js");
 var import_Group = require("./Group.js");
+var import_useMenuAutoClose = require("./hooks/useMenuAutoClose.js");
 var import_Intent = require("./Intent.js");
 var import_Item = require("./Item.js");
 var import_ItemTooltip = require("./ItemTooltip.js");
@@ -40,7 +41,6 @@ var import_SubTrigger = require("./SubTrigger.js");
 var import_Suffix = require("./Suffix.js");
 var import_Trigger = require("./Trigger.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
-var import_isBrowser = require("../../core/utils/isBrowser.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 function getMenuSlots(children) {
   const slots = {
@@ -102,18 +102,7 @@ const MenuRoot = (props) => {
     ),
     [children, updateOpen, dataDtComponent]
   );
-  const onWindowBlur = (0, import_react.useCallback)(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  (0, import_react.useEffect)(() => {
-    if (!import_isBrowser.isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  (0, import_useMenuAutoClose.useMenuAutoClose)(open, updateOpen);
   const menuContextValue = (0, import_react.useMemo)(
     () => ({
       isOpen: open,

package/navigation/menu/Menu.sty.js

@@ -29,11 +29,11 @@ __export(Menu_css_exports, {
 module.exports = __toCommonJS(Menu_css_exports);
 var import_Menu_css_ts_vanilla = require("./Menu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var content = "_1m01arl3-3-5-2";
-var group = "_1m01arl4-3-5-2";
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl5-3-5-2", variantClassNames: { disabled: { true: "_1m01arl6-3-5-2", false: "_1m01arl7-3-5-2" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-5-2";
-var label = "_1m01arl2-3-5-2";
-var subChildren = "_1m01arl9-3-5-2";
-var tooltip = "_1m01arl0-3-5-2";
-var tooltipWrapper = "_1m01arl1-3-5-2";
+var content = "_1m01arl3-3-6-0";
+var group = "_1m01arl4-3-6-0";
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl5-3-6-0", variantClassNames: { disabled: { true: "_1m01arl6-3-6-0", false: "_1m01arl7-3-6-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl8-3-6-0";
+var label = "_1m01arl2-3-6-0";
+var subChildren = "_1m01arl9-3-6-0";
+var tooltip = "_1m01arl0-3-6-0";
+var tooltipWrapper = "_1m01arl1-3-6-0";

package/navigation/menu/Sub.js

@@ -25,10 +25,10 @@ var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
 var import_react_is = require("react-is");
 var import_MenuSubContext = require("./contexts/MenuSubContext.js");
+var import_useMenuAutoClose = require("./hooks/useMenuAutoClose.js");
 var import_SubContent = require("./SubContent.js");
 var import_SubTrigger = require("./SubTrigger.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
-var import_isBrowser = require("../../core/utils/isBrowser.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 function registerTabHandlers(children, handleTabKeyPressed) {
   return import_react.Children.map(children, (child) => {
@@ -82,18 +82,7 @@ const Sub = (props) => {
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]
   );
-  const onWindowBlur = (0, import_react.useCallback)(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  (0, import_react.useEffect)(() => {
-    if (!import_isBrowser.isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  (0, import_useMenuAutoClose.useMenuAutoClose)(open, updateOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_MenuSubContext.MenuSubContext.Provider,
     {

package/navigation/menu/hooks/useMenuAutoClose.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Auto-close behavior shared between `Menu` and `Menu.Sub`:
+ *
+ * - Closes on window blur, working around a Radix bug where submenus stay
+ *   open when the browser window loses focus
+ *   (https://github.com/radix-ui/primitives/issues/1441).
+ * - Closes when any `useOverlay`-managed overlay (Modal, Sheet, Drawer, ...)
+ *   is pushed onto the stack while the menu is open, so the user only has
+ *   to dismiss the topmost layer.
+ *
+ * Menus themselves don't register with `visibleOverlays` (Radix has its own
+ * dismiss layer); the hook just observes stack growth above the size
+ * captured at open-time.
+ * @internal
+ */
+export declare function useMenuAutoClose(open: boolean | undefined, setOpen: (open: boolean) => void): void;