@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -1,14 +1,14 @@
-._w5wkeh0-3-1-1 {
+._w5wkeh0-3-2-0 {
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh3-3-1-1 {
+._w5wkeh3-3-2-0 {
   cursor: not-allowed;
 }
-._w5wkeh4-3-1-1 {
+._w5wkeh4-3-2-0 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh5-3-1-1 {
+._w5wkeh5-3-2-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -17,27 +17,27 @@
   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-1-1);
-  color: var(--_bx32h0-3-1-1);
+  background: var(--_bx32h2-3-2-0);
+  color: var(--_bx32h0-3-2-0);
   max-width: calc(100% - var(--dt-spacings-size-2, 2px));
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._w5wkeh6-3-1-1 {
+._w5wkeh6-3-2-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-1-1:not(._w5wkeh3-3-1-1) ._w5wkeh6-3-1-1 {
+._w5wkeh1-3-2-0:not(._w5wkeh3-3-2-0) ._w5wkeh6-3-2-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh7-3-1-1 {
+._w5wkeh7-3-2-0 {
   width: 100%;
 }
-._w5wkeh8-3-1-1 {
+._w5wkeh8-3-2-0 {
   width: fit-content;
 }
-._w5wkeh9-3-1-1 {
+._w5wkeh9-3-2-0 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -45,30 +45,30 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkeh9-3-1-1::-webkit-scrollbar {
+._w5wkeh9-3-2-0::-webkit-scrollbar {
   display: none;
 }
-._w5wkeha-3-1-1 {
+._w5wkeha-3-2-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;
 }
-._w5wkehb-3-1-1 {
+._w5wkehb-3-2-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;
 }
-._w5wkehc-3-1-1 {
+._w5wkehc-3-2-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;
 }
-._w5wkehd-3-1-1 {
+._w5wkehd-3-2-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._w5wkehe-3-1-1 {
+._w5wkehe-3-2-0 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -78,27 +78,27 @@
   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-1-1);
-  color: var(--_bx32h0-3-1-1);
+  background: var(--_bx32h3-3-2-0);
+  color: var(--_bx32h0-3-2-0);
   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);
 }
-._w5wkehe-3-1-1._w5wkeh2-3-1-1 {
+._w5wkehe-3-2-0._w5wkeh2-3-2-0 {
   cursor: not-allowed;
   background-color: transparent;
 }
-._w5wkehe-3-1-1._w5wkeh0-3-1-1 {
+._w5wkehe-3-2-0._w5wkeh0-3-2-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehe-3-1-1:first-child {
+._w5wkehe-3-2-0:first-child {
   margin-left: 1px;
 }
-._w5wkehe-3-1-1:last-child {
+._w5wkehe-3-2-0:last-child {
   margin-right: 1px;
 }
-._w5wkehf-3-1-1 {
+._w5wkehf-3-2-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -106,7 +106,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehg-3-1-1 {
+._w5wkehg-3-2-0 {
   min-width: 0;
   align-items: center;
 }

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

@@ -1,19 +1,19 @@
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh0-3-1-1";
-var container = "_w5wkeh5-3-1-1";
-var containerWidths = { full: "_w5wkeh7-3-1-1", content: "_w5wkeh8-3-1-1" };
-var disabled = "_w5wkeh2-3-1-1";
-var disabledGroup = "_w5wkeh3-3-1-1";
-var divider = "_w5wkeh6-3-1-1";
-var error = "_w5wkeh1-3-1-1";
-var hidden = "_w5wkeh4-3-1-1";
-var item = "_w5wkehe-3-1-1";
-var scrollButton = "_w5wkehd-3-1-1";
-var scrollContainer = "_w5wkeh9-3-1-1";
-var scrollVariants = { both: "_w5wkeha-3-1-1", left: "_w5wkehb-3-1-1", right: "_w5wkehc-3-1-1" };
-var text = "_w5wkehf-3-1-1";
-var textContainer = "_w5wkehg-3-1-1";
+var checked = "_w5wkeh0-3-2-0";
+var container = "_w5wkeh5-3-2-0";
+var containerWidths = { full: "_w5wkeh7-3-2-0", content: "_w5wkeh8-3-2-0" };
+var disabled = "_w5wkeh2-3-2-0";
+var disabledGroup = "_w5wkeh3-3-2-0";
+var divider = "_w5wkeh6-3-2-0";
+var error = "_w5wkeh1-3-2-0";
+var hidden = "_w5wkeh4-3-2-0";
+var item = "_w5wkehe-3-2-0";
+var scrollButton = "_w5wkehd-3-2-0";
+var scrollContainer = "_w5wkeh9-3-2-0";
+var scrollVariants = { both: "_w5wkeha-3-2-0", left: "_w5wkehb-3-2-0", right: "_w5wkehc-3-2-0" };
+var text = "_w5wkehf-3-2-0";
+var textContainer = "_w5wkehg-3-2-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 '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh0-3-1-1';\nexport var container = '_w5wkeh5-3-1-1';\nexport var containerWidths = {full:'_w5wkeh7-3-1-1',content:'_w5wkeh8-3-1-1'};\nexport var disabled = '_w5wkeh2-3-1-1';\nexport var disabledGroup = '_w5wkeh3-3-1-1';\nexport var divider = '_w5wkeh6-3-1-1';\nexport var error = '_w5wkeh1-3-1-1';\nexport var hidden = '_w5wkeh4-3-1-1';\nexport var item = '_w5wkehe-3-1-1';\nexport var scrollButton = '_w5wkehd-3-1-1';\nexport var scrollContainer = '_w5wkeh9-3-1-1';\nexport var scrollVariants = {both:'_w5wkeha-3-1-1',left:'_w5wkehb-3-1-1',right:'_w5wkehc-3-1-1'};\nexport var text = '_w5wkehf-3-1-1';\nexport var textContainer = '_w5wkehg-3-1-1';"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh0-3-2-0';\nexport var container = '_w5wkeh5-3-2-0';\nexport var containerWidths = {full:'_w5wkeh7-3-2-0',content:'_w5wkeh8-3-2-0'};\nexport var disabled = '_w5wkeh2-3-2-0';\nexport var disabledGroup = '_w5wkeh3-3-2-0';\nexport var divider = '_w5wkeh6-3-2-0';\nexport var error = '_w5wkeh1-3-2-0';\nexport var hidden = '_w5wkeh4-3-2-0';\nexport var item = '_w5wkehe-3-2-0';\nexport var scrollButton = '_w5wkehd-3-2-0';\nexport var scrollContainer = '_w5wkeh9-3-2-0';\nexport var scrollVariants = {both:'_w5wkeha-3-2-0',left:'_w5wkehb-3-2-0',right:'_w5wkehc-3-2-0'};\nexport var text = '_w5wkehf-3-2-0';\nexport var textContainer = '_w5wkehg-3-2-0';"],
   "mappings": "AAAA,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,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-1-1 {
+._8j2khp0-3-2-0 {
   position: relative;
   display: flex;
   align-items: center;

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

@@ -90,12 +90,21 @@ const AppHeaderRoot = forwardRef(
 );
 AppHeaderRoot.displayName = "AppHeader";
 const AppHeader = Object.assign(AppHeaderRoot, {
+  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.
+  /**
+   * @deprecated use {@link AppHeader.Logo}
+   */
   AppNavLink: Logo,
-  // should be deprecated and superseded by AppHeader.Logo
+  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.
+  /**
+   * @deprecated use {@link AppHeader.Navigation}
+   */
   NavItems: Navigation,
-  // should be deprecated and superseded by AppHeader.Navigation
+  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.
+  /**
+   * @deprecated use {@link AppHeader.NavigationItem}
+   */
   NavItem: NavigationItem,
-  // should be deprecated and superseded by AppHeader.NavigationItem
   AppIcon,
   ActionItems,
   ActionItemGroup,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { ActionButton } from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { ActionItems } from './ActionItems.js';\nimport { AppIcon } from './app-icon/AppIcon.js';\nimport * as styles from './AppHeader.sty.js';\nimport { Logo } from './Logo.js';\nimport { Menus } from './Menus.js';\nimport { Navigation, NavigationItem } from './Navigation.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Divider } from '../divider/Divider.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\nconst COMPONENT_NAME = 'AppHeader';\n\ntype Slots = {\n  actions?: ReactNode;\n  menus?: ReactNode;\n  navigation: ReactNode;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    navigation: <AppHeader.Navigation />,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, ActionItems)) {\n      slots.actions = child;\n      continue;\n    }\n\n    if (isSlot(child, HelpMenu)) {\n      slots.menus = (\n        <>\n          {slots.menus}\n          {child}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Menus)) {\n      slots.menus = (\n        <>\n          {child}\n          {slots.menus}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Navigation)) {\n      slots.navigation = child;\n      continue;\n    }\n\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the AppHeader.');\n    }\n  }\n  return slots;\n}\n\n/**\n * @public\n */\nexport interface AppHeaderProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    WithChildren {}\n\nconst AppHeaderRoot = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const slots = useMemo(() => getItemSlots(children), [children]);\n\n    return (\n      <header\n        {...remainingProps}\n        ref={forwardedRef}\n        className={clsx(styles.header, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <OverlayStackingProvider>\n          {slots.navigation}\n          {slots.actions}\n          {slots.actions && slots.menus ? (\n            <Divider\n              orientation=\"vertical\"\n              flexItem={false}\n              style={{ height: 20 }}\n            />\n          ) : null}\n          {slots.menus}\n        </OverlayStackingProvider>\n      </header>\n    );\n  },\n);\n\n(AppHeaderRoot as typeof AppHeaderRoot & { displayName: string }).displayName =\n  'AppHeader';\n\n/**\n * The AppHeader component is a responsive header with navigation and action items.\n * @public\n */\nexport const AppHeader = Object.assign(AppHeaderRoot, {\n  AppNavLink: Logo, // should be deprecated and superseded by AppHeader.Logo\n  NavItems: Navigation, // should be deprecated and superseded by AppHeader.Navigation\n  NavItem: NavigationItem, // should be deprecated and superseded by AppHeader.NavigationItem\n  AppIcon,\n  ActionItems,\n  ActionItemGroup,\n  ActionButton,\n  Logo,\n  Menus,\n  Navigation,\n  NavigationItem,\n});\n"],
-  "mappings": "AA+BgB,SAWR,UAXQ,KAWR,YAXQ;AA/BhB,OAAO,UAAU;AACjB,SAAS,UAAU,YAA4B,eAAe;AAE9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,+BAA+B;AAKxC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,MAAM,iBAAiB;AAQvB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,YAAY,oBAAC,UAAU,YAAV,EAAqB;AAAA,EACpC;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,UAAU;AAChB;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,YAAM,QACJ,iCACG;AAAA,cAAM;AAAA,QACN;AAAA,SACH;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,QACJ,iCACG;AAAA;AAAA,QACA,MAAM;AAAA,SACT;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,aAAa;AACnB;AAAA,IACF;AAEA,QAAI,MAAM,GAAG;AAEX,cAAQ,KAAK,mDAAmD;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT;AAWA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,QAAQ,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,iBAAiB;AAAA,QAChD,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAEnB,+BAAC,2BACE;AAAA,gBAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM,WAAW,MAAM,QACtB;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG;AAAA;AAAA,UACtB,IACE;AAAA,UACH,MAAM;AAAA,WACT;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,cAAiE,cAChE;AAMK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA,EACpD,YAAY;AAAA;AAAA,EACZ,UAAU;AAAA;AAAA,EACV,SAAS;AAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { ActionButton } from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { ActionItems } from './ActionItems.js';\nimport { AppIcon } from './app-icon/AppIcon.js';\nimport * as styles from './AppHeader.sty.js';\nimport { Logo } from './Logo.js';\nimport { Menus } from './Menus.js';\nimport { Navigation, NavigationItem } from './Navigation.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Divider } from '../divider/Divider.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\nconst COMPONENT_NAME = 'AppHeader';\n\ntype Slots = {\n  actions?: ReactNode;\n  menus?: ReactNode;\n  navigation: ReactNode;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    navigation: <AppHeader.Navigation />,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, ActionItems)) {\n      slots.actions = child;\n      continue;\n    }\n\n    if (isSlot(child, HelpMenu)) {\n      slots.menus = (\n        <>\n          {slots.menus}\n          {child}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Menus)) {\n      slots.menus = (\n        <>\n          {child}\n          {slots.menus}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Navigation)) {\n      slots.navigation = child;\n      continue;\n    }\n\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the AppHeader.');\n    }\n  }\n  return slots;\n}\n\n/**\n * @public\n */\nexport interface AppHeaderProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    WithChildren {}\n\nconst AppHeaderRoot = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const slots = useMemo(() => getItemSlots(children), [children]);\n\n    return (\n      <header\n        {...remainingProps}\n        ref={forwardedRef}\n        className={clsx(styles.header, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <OverlayStackingProvider>\n          {slots.navigation}\n          {slots.actions}\n          {slots.actions && slots.menus ? (\n            <Divider\n              orientation=\"vertical\"\n              flexItem={false}\n              style={{ height: 20 }}\n            />\n          ) : null}\n          {slots.menus}\n        </OverlayStackingProvider>\n      </header>\n    );\n  },\n);\n\n(AppHeaderRoot as typeof AppHeaderRoot & { displayName: string }).displayName =\n  'AppHeader';\n\n/**\n * The AppHeader component is a responsive header with navigation and action items.\n * @public\n */\nexport const AppHeader = Object.assign(AppHeaderRoot, {\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Logo}\n   */\n  AppNavLink: Logo,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Navigation}\n   */\n  NavItems: Navigation,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.NavigationItem}\n   */\n  NavItem: NavigationItem,\n  AppIcon,\n  ActionItems,\n  ActionItemGroup,\n  ActionButton,\n  Logo,\n  Menus,\n  Navigation,\n  NavigationItem,\n});\n"],
+  "mappings": "AA+BgB,SAWR,UAXQ,KAWR,YAXQ;AA/BhB,OAAO,UAAU;AACjB,SAAS,UAAU,YAA4B,eAAe;AAE9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,+BAA+B;AAKxC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,MAAM,iBAAiB;AAQvB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,YAAY,oBAAC,UAAU,YAAV,EAAqB;AAAA,EACpC;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,UAAU;AAChB;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,YAAM,QACJ,iCACG;AAAA,cAAM;AAAA,QACN;AAAA,SACH;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,QACJ,iCACG;AAAA;AAAA,QACA,MAAM;AAAA,SACT;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,aAAa;AACnB;AAAA,IACF;AAEA,QAAI,MAAM,GAAG;AAEX,cAAQ,KAAK,mDAAmD;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT;AAWA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,QAAQ,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,iBAAiB;AAAA,QAChD,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAEnB,+BAAC,2BACE;AAAA,gBAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM,WAAW,MAAM,QACtB;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG;AAAA;AAAA,UACtB,IACE;AAAA,UACH,MAAM;AAAA,WACT;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,cAAiE,cAChE;AAMK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

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

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

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

@@ -1,4 +1,4 @@
-._5aqgt30-3-1-1 {
+._5aqgt30-3-2-0 {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;

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

@@ -7,6 +7,7 @@ import { getAppName } from "@dynatrace-sdk/app-environment";
 import { AppIcon } from "./app-icon/AppIcon.js";
 import * as styles from "./Logo.sty.js";
 import { Button } from "../../buttons/button/Button.js";
+import { ReleasePhaseIndicator } from "../../content/release-phase-indicator/ReleasePhaseIndicator.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { Text } from "../../typography/text/Text.js";
 const Logo = forwardRef(
@@ -18,6 +19,7 @@ const Logo = forwardRef(
       href = "/",
       className,
       style,
+      releasePhase,
       "data-testid": dataTestId,
       ...rest
     } = props;
@@ -41,7 +43,8 @@ const Logo = forwardRef(
         style,
         children: [
           /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(AppIcon, { src: appIcon ?? icon?.props.src, alt: "" }) }),
-          /* @__PURE__ */ jsx(Text, { textStyle: "base-emphasized", className: styles.title, children: name })
+          /* @__PURE__ */ jsx(Text, { textStyle: "base-emphasized", className: styles.title, children: name }),
+          releasePhase !== void 0 ? /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(ReleasePhaseIndicator, { phase: releasePhase }) }) : null
         ]
       }
     );

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

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

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

@@ -1,5 +1,5 @@
 import "./Logo.css";
-var title = "_5aqgt30-3-1-1";
+var title = "_5aqgt30-3-2-0";
 export {
   title
 };

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

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

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

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

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

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-1-1";
-var inlineNav = "_swz1ff4-3-1-1";
-var isDisabled = "_swz1ff1-3-1-1";
-var isSelected = "_swz1ff0-3-1-1";
-var menuLink = "_swz1ff3-3-1-1";
+var button = "_swz1ff2-3-2-0";
+var inlineNav = "_swz1ff4-3-2-0";
+var isDisabled = "_swz1ff1-3-2-0";
+var isSelected = "_swz1ff0-3-2-0";
+var menuLink = "_swz1ff3-3-2-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-1-1';\nexport var inlineNav = '_swz1ff4-3-1-1';\nexport var isDisabled = '_swz1ff1-3-1-1';\nexport var isSelected = '_swz1ff0-3-1-1';\nexport var menuLink = '_swz1ff3-3-1-1';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-2-0';\nexport var inlineNav = '_swz1ff4-3-2-0';\nexport var isDisabled = '_swz1ff1-3-2-0';\nexport var isSelected = '_swz1ff0-3-2-0';\nexport var menuLink = '_swz1ff3-3-2-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-1-1 {
+._otmjah0-3-2-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-1-1:hover {
+._otmjah0-3-2-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-1-1:active {
+._otmjah0-3-2-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-1-1:after {
+._otmjah0-3-2-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-1-1._otmjah1-3-1-1 {
+._otmjah1-3-2-0._otmjah1-3-2-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-1-1._otmjah2-3-1-1 {
+._otmjah2-3-2-0._otmjah2-3-2-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-1-1 {
+._otmjah3-3-2-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-1-1:hover {
+._otmjah3-3-2-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-1-1.active {
+._otmjah4-3-2-0.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-1-1._otmjah3-3-1-1.active {
+._otmjah4-3-2-0._otmjah3-3-2-0.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-1-1:not(._otmjah3-3-1-1).active:hover {
+._otmjah4-3-2-0:not(._otmjah3-3-2-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-1-1:not([role="menuitem"]).active:active {
+._otmjah4-3-2-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-1-1._otmjah3-3-1-1._otmjah4-3-1-1:not([role="menuitem"]).active:active {
+._otmjah4-3-2-0._otmjah3-3-2-0._otmjah4-3-2-0:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-1-1.active::after {
+._otmjah4-3-2-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-1-1._otmjah3-3-1-1.active::after {
+._otmjah4-3-2-0._otmjah3-3-2-0.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-1-1[role="menuitem"].active::after {
+._otmjah4-3-2-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-1-1 a {
+._otmjah4-3-2-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-1-1";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-1-1", variantClassNames: { density: { "default": "_otmjah1-3-1-1", condensed: "_otmjah2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-1-1";
+var disabled = "_otmjah3-3-2-0";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-2-0", variantClassNames: { density: { "default": "_otmjah1-3-2-0", condensed: "_otmjah2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-2-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-1-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-1-1',variantClassNames:{density:{'default':'_otmjah1-3-1-1',condensed:'_otmjah2-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-1-1';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-2-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-2-0',variantClassNames:{density:{'default':'_otmjah1-3-2-0',condensed:'_otmjah2-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-2-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-1-1 {
+._1d2ks7u0-3-2-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-1-1";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-2-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-1-1';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._bf74pw2-3-1-1 {
+._bf74pw2-3-2-0 {
   position: relative;
 }
-._bf74pw2-3-1-1._bf74pw0-3-1-1:not(._bf74pw1-3-1-1), ._bf74pw2-3-1-1.active:not(._bf74pw1-3-1-1) {
+._bf74pw2-3-2-0._bf74pw0-3-2-0:not(._bf74pw1-3-2-0), ._bf74pw2-3-2-0.active:not(._bf74pw1-3-2-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-1-1._bf74pw0-3-1-1:not(._bf74pw1-3-1-1):hover, ._bf74pw2-3-1-1.active:not(._bf74pw1-3-1-1):hover {
+._bf74pw2-3-2-0._bf74pw0-3-2-0:not(._bf74pw1-3-2-0):hover, ._bf74pw2-3-2-0.active:not(._bf74pw1-3-2-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-1-1._bf74pw0-3-1-1::after, ._bf74pw2-3-1-1.active::after {
+._bf74pw2-3-2-0._bf74pw0-3-2-0::after, ._bf74pw2-3-2-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-1-1";
-var isDisabled = "_bf74pw1-3-1-1";
-var isSelected = "_bf74pw0-3-1-1";
+var button = "_bf74pw2-3-2-0";
+var isDisabled = "_bf74pw1-3-2-0";
+var isSelected = "_bf74pw0-3-2-0";
 export {
   button,
   isDisabled,