@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh0-3-4-0 {
-  box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-5-0 {
+  --_w5wkeh0-3-5-0: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh4-3-4-0 {
+._w5wkeh5-3-5-0:not(._w5wkeh4-3-5-0) {
   cursor: not-allowed;
 }
-._w5wkeh5-3-4-0 {
+._w5wkeh6-3-5-0 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh6-3-4-0 {
+._w5wkeh7-3-5-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -17,35 +17,46 @@
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
-  background: var(--_bx32h2-3-4-0);
-  color: var(--_bx32h0-3-4-0);
+  background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  color: var(--dt-colors-text-neutral-default, #2f2f4f);
   max-width: calc(100% - var(--dt-spacings-size-2, 2px));
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._w5wkeh6-3-4-0._w5wkeh3-3-4-0 {
-  background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1jgl8s50-3-5-0 ._w5wkeh7-3-5-0 {
+  background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
+}
+._w5wkeh7-3-5-0._w5wkeh2-3-5-0 {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  color: var(--dt-colors-text-critical-default, #bb0731);
+}
+._w5wkeh7-3-5-0._w5wkeh5-3-5-0 {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+}
+._w5wkeh7-3-5-0._w5wkeh4-3-5-0 {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh6-3-4-0._w5wkeh3-3-4-0._w5wkeh1-3-4-0 {
-  background: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._w5wkeh7-3-5-0._w5wkeh4-3-5-0._w5wkeh2-3-5-0 {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-4-0 {
+._w5wkeh8-3-5-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh1-3-4-0:not(._w5wkeh4-3-4-0) ._w5wkeh7-3-4-0 {
+._w5wkeh2-3-5-0:not(._w5wkeh5-3-5-0) ._w5wkeh8-3-5-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh8-3-4-0 {
+._w5wkeh9-3-5-0 {
   width: 100%;
 }
-._w5wkeh9-3-4-0 {
+._w5wkeha-3-5-0 {
   width: fit-content;
 }
-._w5wkeha-3-4-0 {
+._w5wkehb-3-5-0 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -53,30 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkeha-3-4-0::-webkit-scrollbar {
+._w5wkehb-3-5-0::-webkit-scrollbar {
   display: none;
 }
-._w5wkehb-3-4-0 {
+._w5wkehc-3-5-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehc-3-4-0 {
+._w5wkehd-3-5-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-4-0 {
+._w5wkehe-3-5-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehe-3-4-0 {
+._w5wkehf-3-5-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._w5wkehf-3-4-0 {
+._1jgl8s50-3-5-0 ._w5wkehf-3-5-0:hover:not(._w5wkeh2-3-5-0 ._w5wkehf-3-5-0) {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+}
+._1jgl8s50-3-5-0 ._w5wkehf-3-5-0:active:not(._w5wkeh2-3-5-0 ._w5wkehf-3-5-0) {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._w5wkehg-3-5-0 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -86,39 +103,99 @@
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
   text-wrap: nowrap;
   border-radius: calc(var(--dt-borders-radius-field-default, 6px) - var(--dt-spacings-size-2, 2px));
-  background: var(--_bx32h3-3-4-0);
-  color: var(--_bx32h0-3-4-0);
+  background-color: transparent;
+  color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
+  box-shadow: var(--_w5wkeh0-3-5-0);
 }
-._w5wkehf-3-4-0._w5wkeh2-3-4-0 {
+._w5wkehg-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+}
+._w5wkehg-3-5-0:active {
+  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._w5wkehg-3-5-0 {
+  margin: 0;
+  padding: 5px var(--dt-spacings-size-6, 6px);
+  border-radius: 5px;
+}
+._w5wkeh2-3-5-0 ._w5wkehg-3-5-0 {
+  color: var(--dt-colors-text-critical-default, #bb0731);
+}
+._w5wkeh2-3-5-0 ._w5wkehg-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+}
+._w5wkeh2-3-5-0 ._w5wkehg-3-5-0:active {
+  background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
+}
+._w5wkehg-3-5-0._w5wkeh3-3-5-0 {
   cursor: not-allowed;
   background-color: transparent;
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+}
+._w5wkehg-3-5-0._w5wkeh3-3-5-0:hover {
+  background-color: transparent;
 }
-._w5wkehf-3-4-0._w5wkeh3-3-4-0 {
+._w5wkehg-3-5-0._w5wkeh3-3-5-0:active {
+  background-color: transparent;
+}
+._w5wkeh2-3-5-0 ._w5wkehg-3-5-0._w5wkeh3-3-5-0 {
+  color: var(--dt-colors-text-critical-disabled, #595a7d80);
+}
+._w5wkehg-3-5-0._w5wkeh4-3-5-0 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehf-3-4-0._w5wkeh0-3-4-0 {
+._w5wkehg-3-5-0._w5wkeh4-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
+}
+._w5wkehg-3-5-0._w5wkeh4-3-5-0:active {
+  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
+}
+._w5wkeh2-3-5-0 ._w5wkehg-3-5-0._w5wkeh4-3-5-0 {
+  color: var(--dt-colors-text-critical-default, #bb0731);
+}
+._w5wkehg-3-5-0._w5wkeh1-3-5-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehf-3-4-0._w5wkeh3-3-4-0._w5wkeh0-3-4-0 {
+._w5wkehg-3-5-0._w5wkeh1-3-5-0:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
+}
+._w5wkehg-3-5-0._w5wkeh1-3-5-0:active {
+  background-color: var(--dt-colors-background-surface-default, #fff);
+}
+._w5wkehg-3-5-0._w5wkeh4-3-5-0._w5wkeh1-3-5-0:not(._w5wkeh2-3-5-0 ._w5wkehg-3-5-0) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._w5wkeh1-3-4-0 ._w5wkehf-3-4-0._w5wkeh3-3-4-0 {
-  color: var(--dt-colors-text-critical-default, #bb0731);
+._1jgl8s50-3-5-0 ._w5wkehg-3-5-0._w5wkeh1-3-5-0 {
+  --_w5wkeh0-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+}
+._1jgl8s50-3-5-0 ._w5wkehg-3-5-0._w5wkeh1-3-5-0._w5wkeh3-3-5-0 {
+  --_w5wkeh0-3-5-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._w5wkehf-3-4-0:first-child {
+._1jgl8s50-3-5-0 ._w5wkeh2-3-5-0 ._w5wkehg-3-5-0._w5wkeh1-3-5-0 {
+  --_w5wkeh0-3-5-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+}
+._1jgl8s50-3-5-0 ._w5wkeh2-3-5-0 ._w5wkehg-3-5-0._w5wkeh1-3-5-0._w5wkeh3-3-5-0 {
+  --_w5wkeh0-3-5-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+}
+._w5wkehg-3-5-0:first-child {
   margin-left: 1px;
 }
-._w5wkehf-3-4-0:last-child {
+._w5wkehg-3-5-0:last-child {
   margin-right: 1px;
 }
-._w5wkehg-3-4-0 {
+._1jgl8s50-3-5-0 ._w5wkehg-3-5-0:first-child {
+  margin-left: 0;
+}
+._1jgl8s50-3-5-0 ._w5wkehg-3-5-0:last-child {
+  margin-right: 0;
+}
+._w5wkehh-3-5-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -126,7 +203,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehh-3-4-0 {
+._w5wkehi-3-5-0 {
   min-width: 0;
   align-items: center;
 }

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 = "_w5wkeh0-3-4-0";
-var container = "_w5wkeh6-3-4-0";
-var containerWidths = { full: "_w5wkeh8-3-4-0", content: "_w5wkeh9-3-4-0" };
-var disabled = "_w5wkeh2-3-4-0";
-var disabledGroup = "_w5wkeh4-3-4-0";
-var divider = "_w5wkeh7-3-4-0";
-var error = "_w5wkeh1-3-4-0";
-var hidden = "_w5wkeh5-3-4-0";
-var item = "_w5wkehf-3-4-0";
-var readOnly = "_w5wkeh3-3-4-0";
-var scrollButton = "_w5wkehe-3-4-0";
-var scrollContainer = "_w5wkeha-3-4-0";
-var scrollVariants = { both: "_w5wkehb-3-4-0", left: "_w5wkehc-3-4-0", right: "_w5wkehd-3-4-0" };
-var text = "_w5wkehg-3-4-0";
-var textContainer = "_w5wkehh-3-4-0";
+var checked = "_w5wkeh1-3-5-0";
+var container = "_w5wkeh7-3-5-0";
+var containerWidths = { full: "_w5wkeh9-3-5-0", content: "_w5wkeha-3-5-0" };
+var disabled = "_w5wkeh3-3-5-0";
+var disabledGroup = "_w5wkeh5-3-5-0";
+var divider = "_w5wkeh8-3-5-0";
+var error = "_w5wkeh2-3-5-0";
+var hidden = "_w5wkeh6-3-5-0";
+var item = "_w5wkehg-3-5-0";
+var readOnly = "_w5wkeh4-3-5-0";
+var scrollButton = "_w5wkehf-3-5-0";
+var scrollContainer = "_w5wkehb-3-5-0";
+var scrollVariants = { both: "_w5wkehc-3-5-0", left: "_w5wkehd-3-5-0", right: "_w5wkehe-3-5-0" };
+var text = "_w5wkehh-3-5-0";
+var textContainer = "_w5wkehi-3-5-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 = '_w5wkeh0-3-4-0';\nexport var container = '_w5wkeh6-3-4-0';\nexport var containerWidths = {full:'_w5wkeh8-3-4-0',content:'_w5wkeh9-3-4-0'};\nexport var disabled = '_w5wkeh2-3-4-0';\nexport var disabledGroup = '_w5wkeh4-3-4-0';\nexport var divider = '_w5wkeh7-3-4-0';\nexport var error = '_w5wkeh1-3-4-0';\nexport var hidden = '_w5wkeh5-3-4-0';\nexport var item = '_w5wkehf-3-4-0';\nexport var readOnly = '_w5wkeh3-3-4-0';\nexport var scrollButton = '_w5wkehe-3-4-0';\nexport var scrollContainer = '_w5wkeha-3-4-0';\nexport var scrollVariants = {both:'_w5wkehb-3-4-0',left:'_w5wkehc-3-4-0',right:'_w5wkehd-3-4-0'};\nexport var text = '_w5wkehg-3-4-0';\nexport var textContainer = '_w5wkehh-3-4-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-5-0';\nexport var container = '_w5wkeh7-3-5-0';\nexport var containerWidths = {full:'_w5wkeh9-3-5-0',content:'_w5wkeha-3-5-0'};\nexport var disabled = '_w5wkeh3-3-5-0';\nexport var disabledGroup = '_w5wkeh5-3-5-0';\nexport var divider = '_w5wkeh8-3-5-0';\nexport var error = '_w5wkeh2-3-5-0';\nexport var hidden = '_w5wkeh6-3-5-0';\nexport var item = '_w5wkehg-3-5-0';\nexport var readOnly = '_w5wkeh4-3-5-0';\nexport var scrollButton = '_w5wkehf-3-5-0';\nexport var scrollContainer = '_w5wkehb-3-5-0';\nexport var scrollVariants = {both:'_w5wkehc-3-5-0',left:'_w5wkehd-3-5-0',right:'_w5wkehe-3-5-0'};\nexport var text = '_w5wkehh-3-5-0';\nexport var textContainer = '_w5wkehi-3-5-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/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-4-0 {
+._8j2khp0-3-5-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-4-0";
+var header = "_8j2khp0-3-5-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-4-0';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._swz1ff2-3-4-0 {
+._swz1ff2-3-5-0 {
   position: relative;
 }
-._swz1ff2-3-4-0:is(._swz1ff0-3-4-0,.active):not(._swz1ff1-3-4-0) {
+._swz1ff2-3-5-0:is(._swz1ff0-3-5-0,.active):not(._swz1ff1-3-5-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-4-0:is(._swz1ff0-3-4-0,.active):not(._swz1ff1-3-4-0):hover {
+._swz1ff2-3-5-0:is(._swz1ff0-3-5-0,.active):not(._swz1ff1-3-5-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-4-0:is(._swz1ff0-3-4-0,.active)::after {
+._swz1ff2-3-5-0:is(._swz1ff0-3-5-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-4-0 {
+._swz1ff3-3-5-0 {
   position: relative;
 }
-._swz1ff3-3-4-0:is(._swz1ff0-3-4-0,.active):not(._swz1ff1-3-4-0) {
+._swz1ff3-3-5-0:is(._swz1ff0-3-5-0,.active):not(._swz1ff1-3-5-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-4-0:is(._swz1ff0-3-4-0,.active):not(._swz1ff1-3-4-0):hover {
+._swz1ff3-3-5-0:is(._swz1ff0-3-5-0,.active):not(._swz1ff1-3-5-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-4-0:is(._swz1ff0-3-4-0,.active)::after {
+._swz1ff3-3-5-0:is(._swz1ff0-3-5-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-4-0 {
+._swz1ff4-3-5-0 {
   min-width: max-content;
 }

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

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-4-0";
-var inlineNav = "_swz1ff4-3-4-0";
-var isDisabled = "_swz1ff1-3-4-0";
-var isSelected = "_swz1ff0-3-4-0";
-var menuLink = "_swz1ff3-3-4-0";
+var button = "_swz1ff2-3-5-0";
+var inlineNav = "_swz1ff4-3-5-0";
+var isDisabled = "_swz1ff1-3-5-0";
+var isSelected = "_swz1ff0-3-5-0";
+var menuLink = "_swz1ff3-3-5-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-4-0';\nexport var inlineNav = '_swz1ff4-3-4-0';\nexport var isDisabled = '_swz1ff1-3-4-0';\nexport var isSelected = '_swz1ff0-3-4-0';\nexport var menuLink = '_swz1ff3-3-4-0';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-5-0';\nexport var inlineNav = '_swz1ff4-3-5-0';\nexport var isDisabled = '_swz1ff1-3-5-0';\nexport var isSelected = '_swz1ff0-3-5-0';\nexport var menuLink = '_swz1ff3-3-5-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-4-0 {
+._otmjah0-3-5-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-4-0:hover {
+._otmjah0-3-5-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-4-0:active {
+._otmjah0-3-5-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-4-0:after {
+._otmjah0-3-5-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-4-0._otmjah1-3-4-0 {
+._otmjah1-3-5-0._otmjah1-3-5-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-4-0._otmjah2-3-4-0 {
+._otmjah2-3-5-0._otmjah2-3-5-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-4-0 {
+._otmjah3-3-5-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-4-0:hover {
+._otmjah3-3-5-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-4-0.active {
+._otmjah4-3-5-0.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-4-0._otmjah3-3-4-0.active {
+._otmjah4-3-5-0._otmjah3-3-5-0.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-4-0:not(._otmjah3-3-4-0).active:hover {
+._otmjah4-3-5-0:not(._otmjah3-3-5-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-4-0:not([role="menuitem"]).active:active {
+._otmjah4-3-5-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-4-0._otmjah3-3-4-0._otmjah4-3-4-0:not([role="menuitem"]).active:active {
+._otmjah4-3-5-0._otmjah3-3-5-0._otmjah4-3-5-0:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-4-0.active::after {
+._otmjah4-3-5-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-4-0._otmjah3-3-4-0.active::after {
+._otmjah4-3-5-0._otmjah3-3-5-0.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-4-0[role="menuitem"].active::after {
+._otmjah4-3-5-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-4-0 a {
+._otmjah4-3-5-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-4-0";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-4-0", variantClassNames: { density: { "default": "_otmjah1-3-4-0", condensed: "_otmjah2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-4-0";
+var disabled = "_otmjah3-3-5-0";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-5-0", variantClassNames: { density: { "default": "_otmjah1-3-5-0", condensed: "_otmjah2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-5-0";
 export {
   disabled,
   navItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionButton.css.ts"],
-  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-4-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-4-0',variantClassNames:{density:{'default':'_otmjah1-3-4-0',condensed:'_otmjah2-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-4-0';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-5-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-5-0',variantClassNames:{density:{'default':'_otmjah1-3-5-0',condensed:'_otmjah2-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,wBAAwB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-4-0 {
+._1d2ks7u0-3-5-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

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

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-4-0";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-5-0";
 export {
   actionGroupHiddenItemCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.css.ts"],
-  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-4-0';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._bf74pw2-3-4-0 {
+._bf74pw2-3-5-0 {
   position: relative;
 }
-._bf74pw2-3-4-0._bf74pw0-3-4-0:not(._bf74pw1-3-4-0), ._bf74pw2-3-4-0.active:not(._bf74pw1-3-4-0) {
+._bf74pw2-3-5-0._bf74pw0-3-5-0:not(._bf74pw1-3-5-0), ._bf74pw2-3-5-0.active:not(._bf74pw1-3-5-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-4-0._bf74pw0-3-4-0:not(._bf74pw1-3-4-0):hover, ._bf74pw2-3-4-0.active:not(._bf74pw1-3-4-0):hover {
+._bf74pw2-3-5-0._bf74pw0-3-5-0:not(._bf74pw1-3-5-0):hover, ._bf74pw2-3-5-0.active:not(._bf74pw1-3-5-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-4-0._bf74pw0-3-4-0::after, ._bf74pw2-3-4-0.active::after {
+._bf74pw2-3-5-0._bf74pw0-3-5-0::after, ._bf74pw2-3-5-0.active::after {
   content: "";
   position: absolute;
   width: 20px;

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

@@ -1,7 +1,7 @@
 import "./NavItem.css";
-var button = "_bf74pw2-3-4-0";
-var isDisabled = "_bf74pw1-3-4-0";
-var isSelected = "_bf74pw0-3-4-0";
+var button = "_bf74pw2-3-5-0";
+var isDisabled = "_bf74pw1-3-5-0";
+var isSelected = "_bf74pw0-3-5-0";
 export {
   button,
   isDisabled,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-4-0';\nexport var isDisabled = '_bf74pw1-3-4-0';\nexport var isSelected = '_bf74pw0-3-4-0';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-5-0';\nexport var isDisabled = '_bf74pw1-3-5-0';\nexport var isSelected = '_bf74pw0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-4-0 {
+@keyframes _1dtfpz50-3-5-0 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-4-0 {
+._1dtfpz51-3-5-0 {
   object-fit: contain;
 }
-._1dtfpz52-3-4-0 {
-  animation-name: _1dtfpz50-3-4-0;
+._1dtfpz52-3-5-0 {
+  animation-name: _1dtfpz50-3-5-0;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-4-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-5-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-4-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-5-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }