@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/layouts/split-layout/width-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/split-layout/width-utils.ts"],
+  "sourcesContent": ["/** @public */\nexport type PanelWidth = number | `${number}%`;\n\n/** @internal */\nexport const clamp = (min: number, value: number, max: number) => {\n  return Math.max(min, Math.min(value, max));\n};\n\nconst isPercentage = (value: PanelWidth): value is `${number}%` => {\n  return typeof value === 'string' && value.trim().endsWith('%');\n};\n\n/** @internal */\nexport const convertToPx = (value: PanelWidth, containerSize: number) => {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  const numeric = Number.parseFloat(value);\n  if (!Number.isFinite(numeric)) {\n    throw Error('`value` must be finite');\n  }\n\n  if (isPercentage(value)) {\n    return (numeric / 100) * containerSize;\n  }\n\n  return numeric;\n};\n\n/** @internal */\nexport const resolveWidthPx = (\n  widthValue: PanelWidth,\n  containerWidth: number,\n  fallback: number,\n) => {\n  if (containerWidth <= 0) {\n    return fallback;\n  }\n\n  return convertToPx(widthValue, containerWidth);\n};\n\n/** @internal */\nexport const toCssLength = (value: PanelWidth) => {\n  if (typeof value === 'number') {\n    return `${value}px`;\n  }\n  return value;\n};\n"],
+  "mappings": "AAIO,MAAM,QAAQ,CAAC,KAAa,OAAe,QAAgB;AAChE,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,OAAO,GAAG,CAAC;AAC3C;AAEA,MAAM,eAAe,CAAC,UAA6C;AACjE,SAAO,OAAO,UAAU,YAAY,MAAM,KAAK,EAAE,SAAS,GAAG;AAC/D;AAGO,MAAM,cAAc,CAAC,OAAmB,kBAA0B;AACvE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,OAAO,WAAW,KAAK;AACvC,MAAI,CAAC,OAAO,SAAS,OAAO,GAAG;AAC7B,UAAM,MAAM,wBAAwB;AAAA,EACtC;AAEA,MAAI,aAAa,KAAK,GAAG;AACvB,WAAQ,UAAU,MAAO;AAAA,EAC3B;AAEA,SAAO;AACT;AAGO,MAAM,iBAAiB,CAC5B,YACA,gBACA,aACG;AACH,MAAI,kBAAkB,GAAG;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,YAAY,YAAY,cAAc;AAC/C;AAGO,MAAM,cAAc,CAAC,UAAsB;AAChD,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK;AAAA,EACjB;AACA,SAAO;AACT;",
+  "names": []
+}

package/esm/layouts/surface/Surface.css

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

package/esm/layouts/surface/Surface.js

@@ -6,11 +6,10 @@ import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
 import { colorUtils } from "../../styles/colorUtils.sty.js";
-import {
-  getSpacingSprinkles
-} from "../../styles/getSpacingSprinkles.js";
+import { getSpacingSprinkles } from "../../styles/getSpacingSprinkles.js";
 import { textStyle } from "../../styles/textStyle.sty.js";
 import { useLayoutStyles } from "../hooks/useLayoutStyles.js";
+const COMPONENT_NAME = "Surface";
 const Surface = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
     const {
@@ -24,6 +23,7 @@ const Surface = /* @__PURE__ */ forwardRef(
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      "data-dt-component": dataDtComponent = COMPONENT_NAME,
       as,
       ...remainingProps
     } = props;
@@ -60,6 +60,7 @@ const Surface = /* @__PURE__ */ forwardRef(
           textStyle({ textStyle: "base" })
         ),
         style: { ...layoutSizeStyles, ...consumerStyle },
+        "data-dt-component": dataDtComponent,
         children: [
           /* @__PURE__ */ jsx(
             "div",

package/esm/layouts/surface/Surface.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport * as styles from './Surface.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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 { mergeProps } from '../../core/utils/merge-props.js';\nimport { colorUtils } from '../../styles/colorUtils.sty.js';\nimport {\n  getSpacingSprinkles,\n  type SpacingProps,\n} from '../../styles/getSpacingSprinkles.js';\nimport { textStyle } from '../../styles/textStyle.sty.js';\nimport { useLayoutStyles } from '../hooks/useLayoutStyles.js';\nimport type { LayoutSizeCSS } from '../types/layout.types.js';\n\n//#region Typings\n\n/**\n * Accepted properties for Surface\n * @public\n */\nexport interface SurfaceOwnProps\n  extends AriaLabelingProps,\n    SpacingProps,\n    LayoutSizeCSS,\n    DOMProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Color of the border when the surface has focus or is selected.\n   * @defaultValue 'neutral'\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'critical' | 'warning';\n  /**\n   * Defines if the surface is selected and should indicate that state with a border.\n   * @defaultValue false\n   */\n  selected?: boolean;\n  /**\n   * Indicates if the surface is currently dragged and then applies the corresponding styles.\n   * @defaultValue false\n   */\n  dragged?: boolean;\n  /**\n   * Defines the surface's elevation to the background.\n   * @defaultValue 'flat'\n   */\n  elevation?: 'flat' | 'raised' | 'floating';\n}\n\n/**\n * Merge own props with others inherited from the underlying element type\n * @public\n */\nexport type SurfaceProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  SurfaceOwnProps\n>;\n//#endregion\n\n/**\n * The Surface component is used to structure content on a page.\n * @public\n */\nexport const Surface: <E extends ElementType = 'div'>(\n  props: SurfaceProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: SurfaceProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      elevation = 'flat',\n      dragged = false,\n      selected = false,\n      color = 'neutral',\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: SurfaceProps<E> = props;\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n    const { layoutSizeStyles, remainingProps: surfaceProps } = useLayoutStyles(\n      remainingProps,\n      { paddingDefaults: { padding: 24 } },\n    );\n\n    const surfaceMergedProps = {\n      ...mergeProps(\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The remainingProps type is too complex due to the\n        // polymorphic inheritance.\n        surfaceProps as Record<string, unknown>,\n        ariaLabelingProps,\n      ),\n    };\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        {...surfaceMergedProps}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          'strato-surface',\n          colorUtils({ color, variant: selected ? 'accent' : 'default' }),\n          styles.surface({ selected }),\n          focusRingStatic({ color, when: 'focus-visible' }),\n          consumerClassName,\n          getSpacingSprinkles(remainingProps, { padding: 24 }),\n          textStyle({ textStyle: 'base' }),\n        )}\n        style={{ ...layoutSizeStyles, ...consumerStyle }}\n      >\n        <div\n          className={clsx(\n            'surface-background',\n            styles.pseudoElement({ elevation, dragged }),\n          )}\n          aria-hidden={true}\n        />\n        {children}\n      </Component>\n    );\n  },\n);\n"],
-  "mappings": "AAoHM,SAiBE,KAjBF;AApHN,OAAO,UAAU;AACjB,SAA8C,kBAAkB;AAEhE,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAQhC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAsDzB,MAAM,UAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,IACL,IAAqB;AAErB,UAAM,oBAAoB,qBAAqB,cAAc;AAE7D,UAAM,EAAE,kBAAkB,gBAAgB,aAAa,IAAI;AAAA,MACzD;AAAA,MACA,EAAE,iBAAiB,EAAE,SAAS,GAAG,EAAE;AAAA,IACrC;AAEA,UAAM,qBAAqB;AAAA,MACzB,GAAG;AAAA;AAAA;AAAA;AAAA,QAID;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,WAAW,EAAE,OAAO,SAAS,WAAW,WAAW,UAAU,CAAC;AAAA,UAC9D,OAAO,QAAQ,EAAE,SAAS,CAAC;AAAA,UAC3B,gBAAgB,EAAE,OAAO,MAAM,gBAAgB,CAAC;AAAA,UAChD;AAAA,UACA,oBAAoB,gBAAgB,EAAE,SAAS,GAAG,CAAC;AAAA,UACnD,UAAU,EAAE,WAAW,OAAO,CAAC;AAAA,QACjC;AAAA,QACA,OAAO,EAAE,GAAG,kBAAkB,GAAG,cAAc;AAAA,QAE/C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,cAAc,EAAE,WAAW,QAAQ,CAAC;AAAA,cAC7C;AAAA,cACA,eAAa;AAAA;AAAA,UACf;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, forwardRef, type ReactElement } from 'react';\n\nimport type { SurfaceProps } from './surface-types.js';\nimport * as styles from './Surface.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { colorUtils } from '../../styles/colorUtils.sty.js';\nimport { getSpacingSprinkles } from '../../styles/getSpacingSprinkles.js';\nimport { textStyle } from '../../styles/textStyle.sty.js';\nimport { useLayoutStyles } from '../hooks/useLayoutStyles.js';\n\nconst COMPONENT_NAME = 'Surface';\n\n/**\n * The Surface component is used to structure content on a page.\n * @public\n */\nexport const Surface: <E extends ElementType = 'div'>(\n  props: SurfaceProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: SurfaceProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      elevation = 'flat',\n      dragged = false,\n      selected = false,\n      color = 'neutral',\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      as,\n      ...remainingProps\n    }: SurfaceProps<E> = props;\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n    const { layoutSizeStyles, remainingProps: surfaceProps } = useLayoutStyles(\n      remainingProps,\n      { paddingDefaults: { padding: 24 } },\n    );\n\n    const surfaceMergedProps = {\n      ...mergeProps(\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The remainingProps type is too complex due to the\n        // polymorphic inheritance.\n        surfaceProps as Record<string, unknown>,\n        ariaLabelingProps,\n      ),\n    };\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        {...surfaceMergedProps}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          'strato-surface',\n          colorUtils({ color, variant: selected ? 'accent' : 'default' }),\n          styles.surface({ selected }),\n          focusRingStatic({ color, when: 'focus-visible' }),\n          consumerClassName,\n          getSpacingSprinkles(remainingProps, { padding: 24 }),\n          textStyle({ textStyle: 'base' }),\n        )}\n        style={{ ...layoutSizeStyles, ...consumerStyle }}\n        data-dt-component={dataDtComponent}\n      >\n        <div\n          className={clsx(\n            'surface-background',\n            styles.pseudoElement({ elevation, dragged }),\n          )}\n          aria-hidden={true}\n        />\n        {children}\n      </Component>\n    );\n  },\n);\n"],
+  "mappings": "AA8DM,SAkBE,KAlBF;AA9DN,OAAO,UAAU;AACjB,SAA2B,kBAAqC;AAGhE,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAMhB,MAAM,UAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB,kBAAkB;AAAA,MACvC;AAAA,MACA,GAAG;AAAA,IACL,IAAqB;AAErB,UAAM,oBAAoB,qBAAqB,cAAc;AAE7D,UAAM,EAAE,kBAAkB,gBAAgB,aAAa,IAAI;AAAA,MACzD;AAAA,MACA,EAAE,iBAAiB,EAAE,SAAS,GAAG,EAAE;AAAA,IACrC;AAEA,UAAM,qBAAqB;AAAA,MACzB,GAAG;AAAA;AAAA;AAAA;AAAA,QAID;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,WAAW,EAAE,OAAO,SAAS,WAAW,WAAW,UAAU,CAAC;AAAA,UAC9D,OAAO,QAAQ,EAAE,SAAS,CAAC;AAAA,UAC3B,gBAAgB,EAAE,OAAO,MAAM,gBAAgB,CAAC;AAAA,UAChD;AAAA,UACA,oBAAoB,gBAAgB,EAAE,SAAS,GAAG,CAAC;AAAA,UACnD,UAAU,EAAE,WAAW,OAAO,CAAC;AAAA,QACjC;AAAA,QACA,OAAO,EAAE,GAAG,kBAAkB,GAAG,cAAc;AAAA,QAC/C,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,cAAc,EAAE,WAAW,QAAQ,CAAC;AAAA,cAC7C;AAAA,cACA,eAAa;AAAA;AAAA,UACf;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/layouts/surface/Surface.sty.js

@@ -1,8 +1,8 @@
 import "../../styles/colorUtils.css";
 import "./Surface.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-0-1", variantClassNames: { elevation: { flat: "_1qto6jta-3-0-1", raised: "_1qto6jtb-3-0-1", floating: "_1qto6jtc-3-0-1" }, dragged: { true: "_1qto6jtd-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-0-1", variantClassNames: { selected: { true: "_1qto6jt7-3-0-1", false: "_1qto6jt8-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-1-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-1-0", raised: "_1qto6jtb-3-1-0", floating: "_1qto6jtc-3-1-0" }, dragged: { true: "_1qto6jtd-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-1-0", variantClassNames: { selected: { true: "_1qto6jt7-3-1-0", false: "_1qto6jt8-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   pseudoElement,
   surface

package/esm/layouts/surface/Surface.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-0-1',variantClassNames:{elevation:{flat:'_1qto6jta-3-0-1',raised:'_1qto6jtb-3-0-1',floating:'_1qto6jtc-3-0-1'},dragged:{true:'_1qto6jtd-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-0-1',variantClassNames:{selected:{true:'_1qto6jt7-3-0-1',false:'_1qto6jt8-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-1-0',variantClassNames:{elevation:{flat:'_1qto6jta-3-1-0',raised:'_1qto6jtb-3-1-0',floating:'_1qto6jtc-3-1-0'},dragged:{true:'_1qto6jtd-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-1-0',variantClassNames:{selected:{true:'_1qto6jt7-3-1-0',false:'_1qto6jt8-3-1-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,QAAO,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClP,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/surface/surface-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=surface-types.js.map

package/esm/layouts/surface/surface-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/layouts/surface/variables.sty.js

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-0-1)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-1-0)";
 export {
   surfaceBorderRadius
 };

package/esm/layouts/surface/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/variables.css.ts"],
-  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-0-1)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-1-0)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/title-bar/TitleBar.css

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

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

@@ -12,6 +12,7 @@ import { useSlots } from "../../core/hooks/useSlots.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
 import { Divider } from "../divider/Divider.js";
 import { Flex } from "../flex/Flex.js";
+const COMPONENT_NAME = "TitleBar";
 const TitleBarRoot = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
     const {
@@ -48,6 +49,7 @@ const TitleBarRoot = /* @__PURE__ */ forwardRef(
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 8, children: [
             slots.navigation && /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: 8, children: [

package/esm/layouts/title-bar/TitleBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { Action } from './Action.js';\nimport { Navigation } from './Navigation.js';\nimport { Prefix } from './Prefix.js';\nimport { Subtitle } from './Subtitle.js';\nimport { Suffix } from './Suffix.js';\nimport { Title } from './Title.js';\nimport { titleSubtitleWrapperCSS } from './TitleBar.sty.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for TitleBar\n * @public\n */\nexport interface TitleBarProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether a divider is displayed after the TitleBar component.\n   * @defaultValue true\n   */\n  showDivider?: boolean;\n}\n\n//#endregion\n\n/**\n * The TitleBar component can be used for a consistent layout for section titles and provides\n * layout slots for interactive and navigational elements.\n */\nconst TitleBarRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, TitleBarProps>(\n  (props: TitleBarProps, forwardedRef) => {\n    const {\n      children,\n      showDivider = true,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: TitleBarProps = props;\n    const [slots] = useSlots(children, {\n      title: Title,\n      subtitle: Subtitle,\n      navigation: Navigation,\n      suffix: Suffix,\n      prefix: Prefix,\n      action: Action,\n    });\n\n    const titleIsText =\n      !!slots.title && _canReceiveDefaultTextFormat(slots.title.props.children);\n    const subtitleIsText =\n      !!slots.subtitle &&\n      _canReceiveDefaultTextFormat(slots.subtitle?.props.children);\n    const titleAndSubtitleIsText =\n      (titleIsText && !slots.subtitle) || (titleIsText && subtitleIsText);\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        {...remainingProps}\n        width=\"100%\"\n        flexDirection=\"column\"\n        gap={0}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <Flex flexDirection=\"column\" gap={8}>\n          {slots.navigation && (\n            <Flex width=\"100%\" justifyContent=\"space-between\" gap={8}>\n              {slots.navigation}\n              {slots.action}\n            </Flex>\n          )}\n          <Flex width=\"100%\" justifyContent=\"space-between\" gap={8}>\n            <Flex flexWrap=\"wrap\" gap={8} width=\"100%\" minWidth={0}>\n              {slots.prefix}\n              {(slots.title || slots.subtitle) && (\n                <div\n                  className={titleSubtitleWrapperCSS({\n                    childrenAreText: titleAndSubtitleIsText,\n                  })}\n                >\n                  {slots.title}\n                  {slots.subtitle}\n                </div>\n              )}\n              {slots.suffix}\n            </Flex>\n            {!slots.navigation && slots.action}\n          </Flex>\n        </Flex>\n        {showDivider && (\n          <Divider flexItem style={{ marginTop: Spacings.Size8 }} />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(TitleBarRoot as typeof TitleBarRoot & { displayName: string }).displayName =\n  'TitleBar';\n\n/**\n * The TitleBar component can be used for a consistent layout for section titles and provides\n * layout slots for interactive and navigational elements.\n * @public\n */\nexport const TitleBar = Object.assign(TitleBarRoot, {\n  Title,\n  Subtitle,\n  Suffix,\n  Navigation,\n  Prefix,\n  Action,\n});\n"],
-  "mappings": "AAuFY,SAwBF,KAxBE;AAvFZ,SAAS,kBAAkB;AAE3B,OAAO,cAAc;AAErB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AAKzB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,eAAe;AACxB,SAAS,YAAY;AAyBrB,MAAM,eAA+B;AAAA,EACnC,CAAC,OAAsB,iBAAiB;AACtC,UAAM;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAmB;AACnB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AAED,UAAM,cACJ,CAAC,CAAC,MAAM,SAAS,6BAA6B,MAAM,MAAM,MAAM,QAAQ;AAC1E,UAAM,iBACJ,CAAC,CAAC,MAAM,YACR,6BAA6B,MAAM,UAAU,MAAM,QAAQ;AAC7D,UAAM,yBACH,eAAe,CAAC,MAAM,YAAc,eAAe;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OAAM;AAAA,QACN,eAAc;AAAA,QACd,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB;AAAA,+BAAC,QAAK,eAAc,UAAS,KAAK,GAC/B;AAAA,kBAAM,cACL,qBAAC,QAAK,OAAM,QAAO,gBAAe,iBAAgB,KAAK,GACpD;AAAA,oBAAM;AAAA,cACN,MAAM;AAAA,eACT;AAAA,YAEF,qBAAC,QAAK,OAAM,QAAO,gBAAe,iBAAgB,KAAK,GACrD;AAAA,mCAAC,QAAK,UAAS,QAAO,KAAK,GAAG,OAAM,QAAO,UAAU,GAClD;AAAA,sBAAM;AAAA,iBACL,MAAM,SAAS,MAAM,aACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,wBAAwB;AAAA,sBACjC,iBAAiB;AAAA,oBACnB,CAAC;AAAA,oBAEA;AAAA,4BAAM;AAAA,sBACN,MAAM;AAAA;AAAA;AAAA,gBACT;AAAA,gBAED,MAAM;AAAA,iBACT;AAAA,cACC,CAAC,MAAM,cAAc,MAAM;AAAA,eAC9B;AAAA,aACF;AAAA,UACC,eACC,oBAAC,WAAQ,UAAQ,MAAC,OAAO,EAAE,WAAW,SAAS,MAAM,GAAG;AAAA;AAAA;AAAA,IAE5D;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAOK,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { Action } from './Action.js';\nimport { Navigation } from './Navigation.js';\nimport { Prefix } from './Prefix.js';\nimport { Subtitle } from './Subtitle.js';\nimport { Suffix } from './Suffix.js';\nimport { Title } from './Title.js';\nimport { titleSubtitleWrapperCSS } from './TitleBar.sty.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\nconst COMPONENT_NAME = 'TitleBar';\n\n//#region Typings\n/**\n * Accepted properties for TitleBar\n * @public\n */\nexport interface TitleBarProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether a divider is displayed after the TitleBar component.\n   * @defaultValue true\n   */\n  showDivider?: boolean;\n}\n\n//#endregion\n\n/**\n * The TitleBar component can be used for a consistent layout for section titles and provides\n * layout slots for interactive and navigational elements.\n */\nconst TitleBarRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, TitleBarProps>(\n  (props: TitleBarProps, forwardedRef) => {\n    const {\n      children,\n      showDivider = true,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: TitleBarProps = props;\n    const [slots] = useSlots(children, {\n      title: Title,\n      subtitle: Subtitle,\n      navigation: Navigation,\n      suffix: Suffix,\n      prefix: Prefix,\n      action: Action,\n    });\n\n    const titleIsText =\n      !!slots.title && _canReceiveDefaultTextFormat(slots.title.props.children);\n    const subtitleIsText =\n      !!slots.subtitle &&\n      _canReceiveDefaultTextFormat(slots.subtitle?.props.children);\n    const titleAndSubtitleIsText =\n      (titleIsText && !slots.subtitle) || (titleIsText && subtitleIsText);\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        {...remainingProps}\n        width=\"100%\"\n        flexDirection=\"column\"\n        gap={0}\n        className={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        <Flex flexDirection=\"column\" gap={8}>\n          {slots.navigation && (\n            <Flex width=\"100%\" justifyContent=\"space-between\" gap={8}>\n              {slots.navigation}\n              {slots.action}\n            </Flex>\n          )}\n          <Flex width=\"100%\" justifyContent=\"space-between\" gap={8}>\n            <Flex flexWrap=\"wrap\" gap={8} width=\"100%\" minWidth={0}>\n              {slots.prefix}\n              {(slots.title || slots.subtitle) && (\n                <div\n                  className={titleSubtitleWrapperCSS({\n                    childrenAreText: titleAndSubtitleIsText,\n                  })}\n                >\n                  {slots.title}\n                  {slots.subtitle}\n                </div>\n              )}\n              {slots.suffix}\n            </Flex>\n            {!slots.navigation && slots.action}\n          </Flex>\n        </Flex>\n        {showDivider && (\n          <Divider flexItem style={{ marginTop: Spacings.Size8 }} />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(TitleBarRoot as typeof TitleBarRoot & { displayName: string }).displayName =\n  'TitleBar';\n\n/**\n * The TitleBar component can be used for a consistent layout for section titles and provides\n * layout slots for interactive and navigational elements.\n * @public\n */\nexport const TitleBar = Object.assign(TitleBarRoot, {\n  Title,\n  Subtitle,\n  Suffix,\n  Navigation,\n  Prefix,\n  Action,\n});\n"],
+  "mappings": "AA0FY,SAwBF,KAxBE;AA1FZ,SAAS,kBAAkB;AAE3B,OAAO,cAAc;AAErB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AAKzB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,eAAe;AACxB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAyBvB,MAAM,eAA+B;AAAA,EACnC,CAAC,OAAsB,iBAAiB;AACtC,UAAM;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAmB;AACnB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AAED,UAAM,cACJ,CAAC,CAAC,MAAM,SAAS,6BAA6B,MAAM,MAAM,MAAM,QAAQ;AAC1E,UAAM,iBACJ,CAAC,CAAC,MAAM,YACR,6BAA6B,MAAM,UAAU,MAAM,QAAQ;AAC7D,UAAM,yBACH,eAAe,CAAC,MAAM,YAAc,eAAe;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OAAM;AAAA,QACN,eAAc;AAAA,QACd,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAEnB;AAAA,+BAAC,QAAK,eAAc,UAAS,KAAK,GAC/B;AAAA,kBAAM,cACL,qBAAC,QAAK,OAAM,QAAO,gBAAe,iBAAgB,KAAK,GACpD;AAAA,oBAAM;AAAA,cACN,MAAM;AAAA,eACT;AAAA,YAEF,qBAAC,QAAK,OAAM,QAAO,gBAAe,iBAAgB,KAAK,GACrD;AAAA,mCAAC,QAAK,UAAS,QAAO,KAAK,GAAG,OAAM,QAAO,UAAU,GAClD;AAAA,sBAAM;AAAA,iBACL,MAAM,SAAS,MAAM,aACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,wBAAwB;AAAA,sBACjC,iBAAiB;AAAA,oBACnB,CAAC;AAAA,oBAEA;AAAA,4BAAM;AAAA,sBACN,MAAM;AAAA;AAAA;AAAA,gBACT;AAAA,gBAED,MAAM;AAAA,iBACT;AAAA,cACC,CAAC,MAAM,cAAc,MAAM;AAAA,eAC9B;AAAA,aACF;AAAA,UACC,eACC,oBAAC,WAAQ,UAAQ,MAAC,OAAO,EAAE,WAAW,SAAS,MAAM,GAAG;AAAA;AAAA;AAAA,IAE5D;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAOK,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import "../../styles/textStyle.css";
 import "./TitleBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var navigationWrapperCSS = "_wcwjv22-3-0-1";
-var subtitleCSS = "_wcwjv23-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1";
-var suffixWrapperCSS = "_wcwjv24-3-0-1";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-0-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-1-0";
+var subtitleCSS = "_wcwjv23-3-1-0 _da9a8v0-3-1-0 _da9a8v2-3-1-0 _da9a8v3-3-1-0 _da9a8vb-3-1-0";
+var suffixWrapperCSS = "_wcwjv24-3-1-0";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-1-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   navigationWrapperCSS,
   subtitleCSS,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-0-1';\nexport var subtitleCSS = '_wcwjv23-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1';\nexport var suffixWrapperCSS = '_wcwjv24-3-0-1';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-0-1',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-1-0';\nexport var subtitleCSS = '_wcwjv23-3-1-0 _da9a8v0-3-1-0 _da9a8v2-3-1-0 _da9a8v3-3-1-0 _da9a8vb-3-1-0';\nexport var suffixWrapperCSS = '_wcwjv24-3-1-0';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-1-0',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-1-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/app-link/AppLink.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useAppLink } from "./hooks/useAppLink.js";
 import { Link } from "../../typography/link/Link.js";
+const COMPONENT_NAME = "AppLink";
 const AppLink = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     appId,
@@ -31,6 +32,7 @@ const AppLink = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "data-dtrum-allow": dataDtrumAllow,
       className: consumerClassName,
       style: consumerStyle,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );

package/esm/navigation/app-link/AppLink.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/app-link/AppLink.tsx"],
-  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAppLink } from './hooks/useAppLink.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 { Link } from '../../typography/link/Link.js';\n\n\n/**\n * @public\n */\nexport interface AppLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The ID of the app to which the link points. */\n  appId: string;\n  /** ID of the app page to be launched. */\n  pageToken?: string;\n  /** Function to handle click events on the AppLink. */\n  onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/**\n * `AppLink` renders a link that points to the specified application.\n * @public\n */\nexport const AppLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  AppLinkProps\n>((props, forwardedRef) => {\n  const {\n    appId,\n    pageToken,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClick: consumerOnClick,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const { onClick, href } = useAppLink({ appId, pageToken });\n\n  return (\n    <Link\n      {...remainingProps}\n      ref={forwardedRef}\n      onClick={(event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n        consumerOnClick?.(event);\n        onClick(event);\n      }}\n      href={href}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n    >\n      {children}\n    </Link>\n  );\n});\n\n(AppLink as typeof AppLink & { displayName: string }).displayName = 'AppLink';\n"],
-  "mappings": "AAiDI;AAjDJ,SAAS,kBAAsD;AAE/D,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AAuBd,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,SAAS,KAAK,IAAI,WAAW,EAAE,OAAO,UAAU,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,CAAC,UAAoD;AAC5D,0BAAkB,KAAK;AACvB,gBAAQ,KAAK;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAppLink } from './hooks/useAppLink.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 { Link } from '../../typography/link/Link.js';\n\nconst COMPONENT_NAME = 'AppLink';\n\n/**\n * @public\n */\nexport interface AppLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The ID of the app to which the link points. */\n  appId: string;\n  /** ID of the app page to be launched. */\n  pageToken?: string;\n  /** Function to handle click events on the AppLink. */\n  onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/**\n * `AppLink` renders a link that points to the specified application.\n * @public\n */\nexport const AppLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  AppLinkProps\n>((props, forwardedRef) => {\n  const {\n    appId,\n    pageToken,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClick: consumerOnClick,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const { onClick, href } = useAppLink({ appId, pageToken });\n\n  return (\n    <Link\n      {...remainingProps}\n      ref={forwardedRef}\n      onClick={(event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n        consumerOnClick?.(event);\n        onClick(event);\n      }}\n      href={href}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </Link>\n  );\n});\n\n(AppLink as typeof AppLink & { displayName: string }).displayName = 'AppLink';\n"],
+  "mappings": "AAkDI;AAlDJ,SAAS,kBAAsD;AAE/D,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAsBhB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,SAAS,KAAK,IAAI,WAAW,EAAE,OAAO,UAAU,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,CAAC,UAAoD;AAC5D,0BAAkB,KAAK;AACvB,gBAAQ,KAAK;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-0-1 {
+._hw98ku0-3-1-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-0-1 {
+._hw98ku1-3-1-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-0-1 {
+._hw98ku2-3-1-0 {
   overflow: hidden;
 }
-._hw98ku3-3-0-1 {
+._hw98ku3-3-1-0 {
   overflow: visible;
 }
-._hw98ku4-3-0-1 {
+._hw98ku4-3-1-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-0-1 {
+._hw98ku5-3-1-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-0-1 {
+._hw98ku6-3-1-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-0-1 {
+._hw98ku7-3-1-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-0-1 {
+._hw98ku8-3-1-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/esm/navigation/breadcrumbs/Breadcrumbs.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import {
   Children,
+  cloneElement,
   forwardRef,
   useMemo,
-  useRef,
-  cloneElement
+  useRef
 } from "react";
 import { useIntl } from "react-intl";
 import Colors from "@dynatrace/strato-design-tokens/colors";
@@ -19,6 +19,7 @@ import { useContainerSize } from "../../core/hooks/useContainerSize.js";
 import { useMeasureChildren } from "../../core/hooks/useMeasureChildren.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { Menu } from "../menu/Menu.js";
+const COMPONENT_NAME = "Breadcrumbs";
 const BreadcrumbsRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -115,6 +116,7 @@ const BreadcrumbsRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       className: consumerClassName,
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children: /* @__PURE__ */ jsxs("ol", { ref: rootRef, className: breadcrumbsContainerCSS, children: [
         slots.items[0],
         overflowingBreadcrumbs.current.size > 0 && /* @__PURE__ */ jsxs(Menu, { children: [

package/esm/navigation/breadcrumbs/Breadcrumbs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  breadcrumbsContainerCSS,\n  breadcrumbsItemInvisibleCSS,\n} from './Breadcrumbs.sty.js';\nimport { isBreadcrumbItem, Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { Menu } from '../menu/Menu.js';\n\n//#region Typings\n/**\n * Accepted properties for Breadcrumbs\n * @public\n */\nexport interface BreadcrumbsProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Elements to be displayed as Breadcrumbs. */\n  children?: ReactNode;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\n/** Breadcrumbs component */\nconst BreadcrumbsRoot = /* @__PURE__ */ forwardRef<\n  HTMLOListElement,\n  BreadcrumbsProps\n>((props: BreadcrumbsProps, 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  }: BreadcrumbsProps = props;\n  const _containerRef = useRef<HTMLOListElement | null>(null);\n  const { containerRef, measurements, childProps } =\n    useMeasureChildren<HTMLOListElement>();\n  const { width: containerWidth } = useContainerSize(_containerRef);\n\n  const rootRef = useMergeRefs([forwardedRef, _containerRef, containerRef]);\n  const overflowingBreadcrumbs = useRef(new Map<string, boolean>());\n  const intl = useIntl();\n\n  const slots = useMemo(() => {\n    const slots: SlotsType = { items: [], menuItems: [] };\n    const childrenArray = Children.toArray(children);\n\n    // Get total width of children.\n    let childWidths = 0;\n\n    for (const value of Object.values(measurements)) {\n      childWidths += value?.width || 0;\n    }\n\n    // As soon as we have sufficient data from the measurement hook,\n    // determine visible and hidden breadcrumbs.\n    if (Object.keys(measurements).length === childProps.length) {\n      const childKeys = childProps.map((props) => props['data-id']);\n\n      // Index of the next child to remove if there is not enough space.\n      // We start collapsing at the second breadcrumb.\n      // If an item is already collapsed, we additionally skip the menu\n      // toggle that is then added at the second position.\n      let childIndex = overflowingBreadcrumbs.current.size ? 2 : 1;\n\n      // Clear all entries so that breadcrumbs will show up again when expanding the container.\n      overflowingBreadcrumbs.current.clear();\n\n      while (childWidths > containerWidth && childIndex < childProps.length) {\n        // As long as at least three breadcrumbs are still visible (root + location + current),\n        // we keep removing location breadcrumbs until only root and current are left.\n        if (childIndex !== childProps.length - 1) {\n          const key = childKeys[childIndex];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        } else {\n          // If only the root and current breadcrumb are visible, the next one to collapse is\n          // the root breadcrumb. The current breadcrumb will only get a text ellipsis.\n          const key = childKeys[0];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        }\n        childIndex++;\n      }\n    }\n\n    // Iterate over children and add them to the corresponding slots.\n    for (const [index, child] of childrenArray.entries()) {\n      if (isBreadcrumbItem(child)) {\n        const uniqueKey = `nav-items-${index}`;\n\n        // If a breadcrumb is hidden already, we add the toggle for the overlay after the first breadcrumb.\n        // We need to account for the additional child when spreading the childProps onto each child and\n        // shift the index by one for each child after the button.\n        const adjustedIndex =\n          overflowingBreadcrumbs.current.size > 0 && index > 0\n            ? index + 1\n            : index;\n\n        // The last breadcrumb should not render the divider.\n        const isLast = index === childrenArray.length - 1;\n\n        slots.items.push(\n          cloneElement(child, {\n            ...child.props,\n            key: uniqueKey,\n            className: clsx(\n              {\n                [`${breadcrumbsItemInvisibleCSS}`]:\n                  overflowingBreadcrumbs.current.get(\n                    childProps[adjustedIndex]?.['data-id'] || '',\n                  ),\n              },\n              child.props.className,\n            ),\n            isLast,\n            isLastVisible:\n              isLast &&\n              overflowingBreadcrumbs.current.size === childrenArray.length - 1,\n            isCollapsed: false,\n            ...childProps[adjustedIndex],\n          }),\n        );\n\n        if (\n          overflowingBreadcrumbs.current.get(\n            childProps[adjustedIndex]?.['data-id'] || '',\n          )\n        ) {\n          slots.menuItems.push(\n            cloneElement(<Menu.Link />, {\n              ...child.props,\n              key: uniqueKey,\n              isCollapsed: true,\n              ...childProps[adjustedIndex],\n            }),\n          );\n        }\n      }\n    }\n\n    return slots;\n  }, [children, measurements, containerWidth, childProps]);\n\n  return (\n    <nav\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={intl.formatMessage({\n        defaultMessage: 'Breadcrumb',\n        id: 'x2bmZRg98b0KodlW',\n      })}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <ol ref={rootRef} className={breadcrumbsContainerCSS}>\n        {slots.items[0]}\n        {overflowingBreadcrumbs.current.size > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Item as={Button} {...childProps[1]} menuTrigger size=\"condensed\">\n                <Button.Prefix style={{ color: Colors.Text.Neutral.Default }}>\n                  \u2026\n                </Button.Prefix>\n              </Item>\n            </Menu.Trigger>\n            <Menu.Content>{slots.menuItems}</Menu.Content>\n          </Menu>\n        )}\n        {slots.items.slice(1)}\n      </ol>\n    </nav>\n  );\n});\n\n(\n  BreadcrumbsRoot as typeof BreadcrumbsRoot & { displayName: string }\n).displayName = 'Breadcrumbs';\n\n/**\n * The `Breadcrumbs` component can be used to indicate the\n * location and hierarchy of the current page. It also allows\n * users to easily navigate back to a higher level in the hierarchy.\n * @public\n */\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  breadcrumbsContainerCSS,\n  breadcrumbsItemInvisibleCSS,\n} from './Breadcrumbs.sty.js';\nimport { isBreadcrumbItem, Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { Menu } from '../menu/Menu.js';\n\nconst COMPONENT_NAME = 'Breadcrumbs';\n\n//#region Typings\n/**\n * Accepted properties for Breadcrumbs\n * @public\n */\nexport interface BreadcrumbsProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Elements to be displayed as Breadcrumbs. */\n  children?: ReactNode;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\n/** Breadcrumbs component */\nconst BreadcrumbsRoot = /* @__PURE__ */ forwardRef<\n  HTMLOListElement,\n  BreadcrumbsProps\n>((props: BreadcrumbsProps, 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  }: BreadcrumbsProps = props;\n  const _containerRef = useRef<HTMLOListElement | null>(null);\n  const { containerRef, measurements, childProps } =\n    useMeasureChildren<HTMLOListElement>();\n  const { width: containerWidth } = useContainerSize(_containerRef);\n\n  const rootRef = useMergeRefs([forwardedRef, _containerRef, containerRef]);\n  const overflowingBreadcrumbs = useRef(new Map<string, boolean>());\n  const intl = useIntl();\n\n  const slots = useMemo(() => {\n    const slots: SlotsType = { items: [], menuItems: [] };\n    const childrenArray = Children.toArray(children);\n\n    // Get total width of children.\n    let childWidths = 0;\n\n    for (const value of Object.values(measurements)) {\n      childWidths += value?.width || 0;\n    }\n\n    // As soon as we have sufficient data from the measurement hook,\n    // determine visible and hidden breadcrumbs.\n    if (Object.keys(measurements).length === childProps.length) {\n      const childKeys = childProps.map((props) => props['data-id']);\n\n      // Index of the next child to remove if there is not enough space.\n      // We start collapsing at the second breadcrumb.\n      // If an item is already collapsed, we additionally skip the menu\n      // toggle that is then added at the second position.\n      let childIndex = overflowingBreadcrumbs.current.size ? 2 : 1;\n\n      // Clear all entries so that breadcrumbs will show up again when expanding the container.\n      overflowingBreadcrumbs.current.clear();\n\n      while (childWidths > containerWidth && childIndex < childProps.length) {\n        // As long as at least three breadcrumbs are still visible (root + location + current),\n        // we keep removing location breadcrumbs until only root and current are left.\n        if (childIndex !== childProps.length - 1) {\n          const key = childKeys[childIndex];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        } else {\n          // If only the root and current breadcrumb are visible, the next one to collapse is\n          // the root breadcrumb. The current breadcrumb will only get a text ellipsis.\n          const key = childKeys[0];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        }\n        childIndex++;\n      }\n    }\n\n    // Iterate over children and add them to the corresponding slots.\n    for (const [index, child] of childrenArray.entries()) {\n      if (isBreadcrumbItem(child)) {\n        const uniqueKey = `nav-items-${index}`;\n\n        // If a breadcrumb is hidden already, we add the toggle for the overlay after the first breadcrumb.\n        // We need to account for the additional child when spreading the childProps onto each child and\n        // shift the index by one for each child after the button.\n        const adjustedIndex =\n          overflowingBreadcrumbs.current.size > 0 && index > 0\n            ? index + 1\n            : index;\n\n        // The last breadcrumb should not render the divider.\n        const isLast = index === childrenArray.length - 1;\n\n        slots.items.push(\n          cloneElement(child, {\n            ...child.props,\n            key: uniqueKey,\n            className: clsx(\n              {\n                [`${breadcrumbsItemInvisibleCSS}`]:\n                  overflowingBreadcrumbs.current.get(\n                    childProps[adjustedIndex]?.['data-id'] || '',\n                  ),\n              },\n              child.props.className,\n            ),\n            isLast,\n            isLastVisible:\n              isLast &&\n              overflowingBreadcrumbs.current.size === childrenArray.length - 1,\n            isCollapsed: false,\n            ...childProps[adjustedIndex],\n          }),\n        );\n\n        if (\n          overflowingBreadcrumbs.current.get(\n            childProps[adjustedIndex]?.['data-id'] || '',\n          )\n        ) {\n          slots.menuItems.push(\n            cloneElement(<Menu.Link />, {\n              ...child.props,\n              key: uniqueKey,\n              isCollapsed: true,\n              ...childProps[adjustedIndex],\n            }),\n          );\n        }\n      }\n    }\n\n    return slots;\n  }, [children, measurements, containerWidth, childProps]);\n\n  return (\n    <nav\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={intl.formatMessage({\n        defaultMessage: 'Breadcrumb',\n        id: 'x2bmZRg98b0KodlW',\n      })}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <ol ref={rootRef} className={breadcrumbsContainerCSS}>\n        {slots.items[0]}\n        {overflowingBreadcrumbs.current.size > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Item as={Button} {...childProps[1]} menuTrigger size=\"condensed\">\n                <Button.Prefix style={{ color: Colors.Text.Neutral.Default }}>\n                  \u2026\n                </Button.Prefix>\n              </Item>\n            </Menu.Trigger>\n            <Menu.Content>{slots.menuItems}</Menu.Content>\n          </Menu>\n        )}\n        {slots.items.slice(1)}\n      </ol>\n    </nav>\n  );\n});\n\n(\n  BreadcrumbsRoot as typeof BreadcrumbsRoot & { displayName: string }\n).displayName = 'Breadcrumbs';\n\n/**\n * The `Breadcrumbs` component can be used to indicate the\n * location and hierarchy of the current page. It also allows\n * users to easily navigate back to a higher level in the hierarchy.\n * @public\n */\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item,\n});\n"],
+  "mappings": "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",
   "names": ["slots", "props"]
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -1,10 +1,10 @@
 import "./Breadcrumbs.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var breadcrumbsContainerCSS = "_hw98ku0-3-0-1";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-0-1", variantClassNames: { disabled: { true: "_hw98ku6-3-0-1" }, isLastItem: { true: "_hw98ku7-3-0-1" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-0-1";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-0-1", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-0-1", false: "_hw98ku3-3-0-1" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-0-1";
+var breadcrumbsContainerCSS = "_hw98ku0-3-1-0";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-1-0", variantClassNames: { disabled: { true: "_hw98ku6-3-1-0" }, isLastItem: { true: "_hw98ku7-3-1-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-1-0";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-1-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-1-0", false: "_hw98ku3-3-1-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-1-0";
 export {
   breadcrumbsContainerCSS,
   breadcrumbsItemCSS,

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.css.ts"],
-  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-0-1';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-0-1',variantClassNames:{disabled:{true:'_hw98ku6-3-0-1'},isLastItem:{true:'_hw98ku7-3-0-1'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-0-1';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-0-1',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-0-1',false:'_hw98ku3-3-0-1'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-0-1';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-1-0';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-1-0',variantClassNames:{disabled:{true:'_hw98ku6-3-1-0'},isLastItem:{true:'_hw98ku7-3-1-0'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-1-0';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-1-0',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-1-0',false:'_hw98ku3-3-1-0'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,8BAA8B;AAClC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClN,IAAI,8BAA8B;",
   "names": []
 }