@dynatrace/strato-components 3.13.3 → 3.14.0

package/esm/layouts/split-layout/useSplitSizing.js

@@ -1,100 +1,24 @@
+import { useMemo, useState } from "react";
 import {
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { clampPanelWidth, computeLayout } from "./split-sizing-utils.js";
-import { convertToPx, toCssLength } from "./width-utils.js";
+  resolvePanelSizing
+} from "./panel-sizing.js";
+import { usePanelDrag } from "./usePanelDrag.js";
 import { useResizeObserver } from "../../core/hooks/useResizeObserver.js";
-function getEffectiveHandleWidth() {
-  if (typeof document === "undefined") {
-    return 8;
-  }
-  const raw = getComputedStyle(document.documentElement).getPropertyValue("--_dt-split-handle-ew").trim();
-  const value = parseFloat(raw);
-  return Number.isNaN(value) ? 8 : value;
-}
-function useApplyControlledWidth({
-  controlledWidth,
-  containerWidth,
-  isDraggingRef,
-  getClampedSplit,
-  splitPxRef,
-  hasBeenManuallyResizedRef,
-  setSplitPx
-}) {
-  const appliedRef = useRef(void 0);
-  if (controlledWidth !== void 0 && containerWidth > 0 && !isDraggingRef.current && controlledWidth !== appliedRef.current) {
-    appliedRef.current = controlledWidth;
-    const clamped = getClampedSplit(controlledWidth, containerWidth);
-    if (splitPxRef.current !== clamped) {
-      splitPxRef.current = clamped;
-      hasBeenManuallyResizedRef.current = true;
-      setSplitPx(clamped);
-    }
-  }
-}
 function useSplitSizing(options) {
   const { panel, content, refs } = options;
   const [containerWidth, setContainerWidth] = useState(0);
-  const [splitPx, setSplitPx] = useState(() => {
-    if (typeof panel.default === "number") {
-      return panel.default;
-    }
-    return -1;
-  });
-  const splitPxRef = useRef(splitPx);
-  const isDraggingRef = useRef(false);
-  const hasBeenManuallyResizedRef = useRef(false);
-  const dragStartPx = useRef(null);
-  if (!isDraggingRef.current) {
-    splitPxRef.current = splitPx;
-  }
-  const handleWidth = panel.resizable ? getEffectiveHandleWidth() : 0;
-  const contentMinCss = toCssLength(content.min);
-  const sizingConfig = useMemo(
+  const [draggedWidth, setDraggedWidth] = useState(
+    void 0
+  );
+  const constraints = useMemo(
     () => ({
-      panelMin: panel.min,
-      panelMax: panel.max,
-      contentMin: content.min,
-      handleWidth
+      minWidth: panel.min,
+      maxWidth: panel.max,
+      reservedMin: content.min,
+      resizable: panel.resizable
     }),
-    [panel.min, panel.max, content.min, handleWidth]
-  );
-  const getClampedSplit = useCallback(
-    (split, container) => clampPanelWidth(split, container, sizingConfig),
-    [sizingConfig]
+    [panel.min, panel.max, content.min, panel.resizable]
   );
-  useLayoutEffect(
-    function initializeSplit() {
-      if (containerWidth === 0) {
-        return;
-      }
-      if (typeof panel.default === "number") {
-        if (splitPx !== -1) {
-          return;
-        }
-        setSplitPx(panel.default);
-        return;
-      }
-      if (hasBeenManuallyResizedRef.current) {
-        return;
-      }
-      setSplitPx(convertToPx(panel.default, containerWidth));
-    },
-    [containerWidth, panel.default, splitPx]
-  );
-  useApplyControlledWidth({
-    controlledWidth: panel.width,
-    containerWidth,
-    isDraggingRef,
-    getClampedSplit,
-    splitPxRef,
-    hasBeenManuallyResizedRef,
-    setSplitPx
-  });
   useResizeObserver({
     // Unfortunately, the `useResizeObserver` hook doesn't support generic null types
     // so we have to cast here to avoid a type error.
@@ -106,67 +30,34 @@ function useSplitSizing(options) {
       setContainerWidth(size.width);
     }
   });
-  const { position: panelPosition, onResize: onPanelResize } = panel;
-  const dragActions = useMemo(
-    () => ({
-      onDragStart: () => {
-        isDraggingRef.current = true;
-        const containerW = refs.root.current?.offsetWidth ?? 0;
-        const clamped = getClampedSplit(splitPxRef.current, containerW);
-        splitPxRef.current = clamped;
-        setSplitPx(clamped);
-        dragStartPx.current = clamped;
-      },
-      onDrag: (mx) => {
-        const containerW = refs.root.current?.offsetWidth ?? 0;
-        if (dragStartPx.current === null || containerW === 0) {
-          return;
-        }
-        const sign = panelPosition === "start" ? 1 : -1;
-        const next = dragStartPx.current + mx * sign;
-        const clamped = getClampedSplit(next, containerW);
-        splitPxRef.current = clamped;
-        if (refs.panel.current) {
-          refs.panel.current.style.width = `${clamped}px`;
-        }
-        if (refs.content.current) {
-          refs.content.current.style.width = `max(${contentMinCss}, 100% - ${clamped + handleWidth}px)`;
-        }
-      },
-      onDragEnd: () => {
-        isDraggingRef.current = false;
-        hasBeenManuallyResizedRef.current = true;
-        dragStartPx.current = null;
-        const rootWidth = refs.root.current?.offsetWidth ?? 0;
-        const clamped = getClampedSplit(splitPxRef.current, rootWidth);
-        splitPxRef.current = clamped;
-        setSplitPx(clamped);
-        onPanelResize?.(clamped);
-      }
-    }),
-    [
-      getClampedSplit,
-      panelPosition,
-      onPanelResize,
-      handleWidth,
-      contentMinCss,
-      refs
-    ]
+  const sizing = resolvePanelSizing(
+    {
+      controlledWidth: panel.width,
+      draggedWidth,
+      defaultWidth: panel.default
+    },
+    containerWidth,
+    constraints
   );
-  const layout = computeLayout(splitPx, containerWidth, sizingConfig);
-  const isPreMeasure = containerWidth === 0 || splitPx === -1;
-  const preWidthCss = panel.width !== void 0 ? `${panel.width}px` : toCssLength(panel.default);
-  const panelWidthCss = isPreMeasure ? preWidthCss : `${layout.panel.width}px`;
-  const contentWidthCss = isPreMeasure ? `max(${toCssLength(
-    content.min
-  )}, 100% - ${preWidthCss} - ${handleWidth}px)` : layout.content.widthCss;
-  return {
-    ...layout,
-    panel: { ...layout.panel, widthCss: panelWidthCss },
-    content: { ...layout.content, widthCss: contentWidthCss },
-    handleWidth,
-    dragActions
-  };
+  const dragActions = usePanelDrag({
+    containerRef: refs.root,
+    constraints,
+    panelWidthPx: sizing.panel.width,
+    direction: panel.position === "start" ? 1 : -1,
+    paint: (dragged) => {
+      if (refs.panel.current) {
+        refs.panel.current.style.width = dragged.panel.widthCss;
+      }
+      if (refs.content.current) {
+        refs.content.current.style.width = dragged.content.widthCss;
+      }
+    },
+    commit: (widthPx) => {
+      setDraggedWidth(widthPx);
+      panel.onResize?.(widthPx);
+    }
+  });
+  return { ...sizing, dragActions };
 }
 export {
   useSplitSizing

package/esm/layouts/split-layout/useSplitSizing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/useSplitSizing.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from 'react';\n\nimport { clampPanelWidth, computeLayout } from './split-sizing-utils.js';\nimport { convertToPx, toCssLength, type PanelWidth } from './width-utils.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\n\n// Read the effective flex space consumed by the SplitLayout resize handle.\n// Under visual refresh, a CSS var is set to 0 on :root (see SplitLayout.css.ts).\n// Reading from document.documentElement is synchronous and available before the\n// handle element mounts, so the correct value is used from the very first render.\nfunction getEffectiveHandleWidth(): number {\n  if (typeof document === 'undefined') {\n    return 8;\n  }\n  const raw = getComputedStyle(document.documentElement)\n    .getPropertyValue('--_dt-split-handle-ew')\n    .trim();\n  const value = parseFloat(raw);\n  return Number.isNaN(value) ? 8 : value;\n}\n\ninterface UseApplyControlledWidthOptions {\n  controlledWidth: number | undefined;\n  containerWidth: number;\n  isDraggingRef: RefObject<boolean>;\n  getClampedSplit: (split: number, container: number) => number;\n  splitPxRef: RefObject<number>;\n  hasBeenManuallyResizedRef: RefObject<boolean>;\n  setSplitPx: Dispatch<SetStateAction<number>>;\n}\n\nfunction useApplyControlledWidth({\n  controlledWidth,\n  containerWidth,\n  isDraggingRef,\n  getClampedSplit,\n  splitPxRef,\n  hasBeenManuallyResizedRef,\n  setSplitPx,\n}: UseApplyControlledWidthOptions): void {\n  const appliedRef = useRef<number | undefined>(undefined);\n  if (\n    controlledWidth !== undefined &&\n    containerWidth > 0 &&\n    !isDraggingRef.current &&\n    controlledWidth !== appliedRef.current\n  ) {\n    appliedRef.current = controlledWidth;\n    const clamped = getClampedSplit(controlledWidth, containerWidth);\n    if (splitPxRef.current !== clamped) {\n      splitPxRef.current = clamped;\n      hasBeenManuallyResizedRef.current = true;\n      setSplitPx(clamped);\n    }\n  }\n}\n\ninterface UseSplitSizingOptions {\n  panel: {\n    min: PanelWidth;\n    max: PanelWidth;\n    default: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n    width?: number;\n  };\n  content: {\n    min: PanelWidth;\n  };\n  refs: {\n    root: RefObject<HTMLDivElement | null>;\n    panel: RefObject<HTMLDivElement | null>;\n    content: RefObject<HTMLDivElement | null>;\n  };\n}\n\ninterface SplitSizing {\n  panel: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  content: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  handleWidth: number;\n  dragActions: {\n    onDragStart: () => void;\n    onDrag: (mx: number) => void;\n    onDragEnd: () => void;\n  };\n}\n\nexport function useSplitSizing(options: UseSplitSizingOptions): SplitSizing {\n  const { panel, content, refs } = options;\n\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [splitPx, setSplitPx] = useState<number>(() => {\n    if (typeof panel.default === 'number') {\n      return panel.default;\n    }\n    return -1;\n  });\n\n  const splitPxRef = useRef(splitPx);\n  const isDraggingRef = useRef(false);\n  const hasBeenManuallyResizedRef = useRef(false);\n  const dragStartPx = useRef<number | null>(null);\n\n  if (!isDraggingRef.current) {\n    splitPxRef.current = splitPx;\n  }\n\n  const handleWidth = panel.resizable ? getEffectiveHandleWidth() : 0;\n\n  const contentMinCss = toCssLength(content.min);\n\n  const sizingConfig = useMemo(\n    () => ({\n      panelMin: panel.min,\n      panelMax: panel.max,\n      contentMin: content.min,\n      handleWidth,\n    }),\n    [panel.min, panel.max, content.min, handleWidth],\n  );\n\n  const getClampedSplit = useCallback(\n    (split: number, container: number) =>\n      clampPanelWidth(split, container, sizingConfig),\n    [sizingConfig],\n  );\n\n  useLayoutEffect(\n    function initializeSplit() {\n      if (containerWidth === 0) {\n        return;\n      }\n      // For a numeric defaultWidth, initialize once and then let the user drive.\n      if (typeof panel.default === 'number') {\n        if (splitPx !== -1) {\n          return;\n        }\n        setSplitPx(panel.default);\n        return;\n      }\n      // For a percentage defaultWidth, re-derive from the container on every\n      // container resize until the user has manually dragged. This ensures that\n      // when the container itself is sized via %, the inner layout still applies\n      // the percentage against the correct, fully-resolved container width.\n      if (hasBeenManuallyResizedRef.current) {\n        return;\n      }\n      setSplitPx(convertToPx(panel.default, containerWidth));\n    },\n    [containerWidth, panel.default, splitPx],\n  );\n\n  useApplyControlledWidth({\n    controlledWidth: panel.width,\n    containerWidth,\n    isDraggingRef,\n    getClampedSplit,\n    splitPxRef,\n    hasBeenManuallyResizedRef,\n    setSplitPx,\n  });\n\n  useResizeObserver({\n    // Unfortunately, the `useResizeObserver` hook doesn't support generic null types\n    // so we have to cast here to avoid a type error.\n    ref: refs.root as RefObject<Element>,\n    onResize: (size) => {\n      if (!size.width) {\n        return;\n      }\n      setContainerWidth(size.width);\n    },\n  });\n\n  const { position: panelPosition, onResize: onPanelResize } = panel;\n\n  const dragActions = useMemo(\n    () => ({\n      onDragStart: () => {\n        isDraggingRef.current = true;\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, containerW);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        dragStartPx.current = clamped;\n      },\n      onDrag: (mx: number) => {\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        if (dragStartPx.current === null || containerW === 0) {\n          return;\n        }\n\n        const sign = panelPosition === 'start' ? 1 : -1;\n\n        const next = dragStartPx.current + mx * sign;\n        const clamped = getClampedSplit(next, containerW);\n        splitPxRef.current = clamped;\n\n        if (refs.panel.current) {\n          refs.panel.current.style.width = `${clamped}px`;\n        }\n        if (refs.content.current) {\n          refs.content.current.style.width = `max(${contentMinCss}, 100% - ${\n            clamped + handleWidth\n          }px)`;\n        }\n      },\n      onDragEnd: () => {\n        isDraggingRef.current = false;\n        hasBeenManuallyResizedRef.current = true;\n        dragStartPx.current = null;\n        const rootWidth = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, rootWidth);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        onPanelResize?.(clamped);\n      },\n    }),\n    [\n      getClampedSplit,\n      panelPosition,\n      onPanelResize,\n      handleWidth,\n      contentMinCss,\n      refs,\n    ],\n  );\n\n  const layout = computeLayout(splitPx, containerWidth, sizingConfig);\n\n  // computeLayout resolves percentage bounds against containerWidth; when it is\n  // 0, those clamp to 0 and collapse the panel to minWidth.\n  const isPreMeasure = containerWidth === 0 || splitPx === -1;\n  const preWidthCss =\n    panel.width !== undefined ? `${panel.width}px` : toCssLength(panel.default);\n  const panelWidthCss = isPreMeasure ? preWidthCss : `${layout.panel.width}px`;\n  const contentWidthCss = isPreMeasure\n    ? `max(${toCssLength(\n        content.min,\n      )}, 100% - ${preWidthCss} - ${handleWidth}px)`\n    : layout.content.widthCss;\n\n  return {\n    ...layout,\n    panel: { ...layout.panel, widthCss: panelWidthCss },\n    content: { ...layout.content, widthCss: contentWidthCss },\n    handleWidth,\n    dragActions,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, useState, type RefObject } from 'react';\n\nimport {\n  resolvePanelSizing,\n  type PanelSizing,\n  type PanelSizingConstraints,\n} from './panel-sizing.js';\nimport { usePanelDrag, type PanelDragActions } from './usePanelDrag.js';\nimport { type PanelWidth } from './width-utils.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\n\ninterface UseSplitSizingOptions {\n  panel: {\n    min: PanelWidth;\n    max: PanelWidth;\n    default: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n    width?: number;\n  };\n  content: {\n    min: PanelWidth;\n  };\n  refs: {\n    root: RefObject<HTMLDivElement | null>;\n    panel: RefObject<HTMLDivElement | null>;\n    content: RefObject<HTMLDivElement | null>;\n  };\n}\n\ninterface SplitSizing extends PanelSizing {\n  dragActions: PanelDragActions;\n}\n\nexport function useSplitSizing(options: UseSplitSizingOptions): SplitSizing {\n  const { panel, content, refs } = options;\n\n  const [containerWidth, setContainerWidth] = useState(0);\n  // Unset until the user drags, so a percentage default keeps re-resolving\n  // against the container while the panel is still following the default.\n  const [draggedWidth, setDraggedWidth] = useState<number | undefined>(\n    undefined,\n  );\n\n  const constraints = useMemo<PanelSizingConstraints>(\n    () => ({\n      minWidth: panel.min,\n      maxWidth: panel.max,\n      reservedMin: content.min,\n      resizable: panel.resizable,\n    }),\n    [panel.min, panel.max, content.min, panel.resizable],\n  );\n\n  useResizeObserver({\n    // Unfortunately, the `useResizeObserver` hook doesn't support generic null types\n    // so we have to cast here to avoid a type error.\n    ref: refs.root as RefObject<Element>,\n    onResize: (size) => {\n      if (!size.width) {\n        return;\n      }\n      setContainerWidth(size.width);\n    },\n  });\n\n  const sizing = resolvePanelSizing(\n    {\n      controlledWidth: panel.width,\n      draggedWidth,\n      defaultWidth: panel.default,\n    },\n    containerWidth,\n    constraints,\n  );\n\n  const dragActions = usePanelDrag({\n    containerRef: refs.root,\n    constraints,\n    panelWidthPx: sizing.panel.width,\n    direction: panel.position === 'start' ? 1 : -1,\n    paint: (dragged) => {\n      if (refs.panel.current) {\n        refs.panel.current.style.width = dragged.panel.widthCss;\n      }\n      if (refs.content.current) {\n        refs.content.current.style.width = dragged.content.widthCss;\n      }\n    },\n    commit: (widthPx) => {\n      setDraggedWidth(widthPx);\n      panel.onResize?.(widthPx);\n    },\n  });\n\n  return { ...sizing, dragActions };\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,gBAAgC;AAElD;AAAA,EACE;AAAA,OAGK;AACP,SAAS,oBAA2C;AAEpD,SAAS,yBAAyB;AA0B3B,SAAS,eAAe,SAA6C;AAC1E,QAAM,EAAE,OAAO,SAAS,KAAK,IAAI;AAEjC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAGtD,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA,EACF;AAEA,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,aAAa,QAAQ;AAAA,MACrB,WAAW,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM,SAAS;AAAA,EACrD;AAEA,oBAAkB;AAAA;AAAA;AAAA,IAGhB,KAAK,KAAK;AAAA,IACV,UAAU,CAAC,SAAS;AAClB,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AACA,wBAAkB,KAAK,KAAK;AAAA,IAC9B;AAAA,EACF,CAAC;AAED,QAAM,SAAS;AAAA,IACb;AAAA,MACE,iBAAiB,MAAM;AAAA,MACvB;AAAA,MACA,cAAc,MAAM;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,aAAa;AAAA,IAC/B,cAAc,KAAK;AAAA,IACnB;AAAA,IACA,cAAc,OAAO,MAAM;AAAA,IAC3B,WAAW,MAAM,aAAa,UAAU,IAAI;AAAA,IAC5C,OAAO,CAAC,YAAY;AAClB,UAAI,KAAK,MAAM,SAAS;AACtB,aAAK,MAAM,QAAQ,MAAM,QAAQ,QAAQ,MAAM;AAAA,MACjD;AACA,UAAI,KAAK,QAAQ,SAAS;AACxB,aAAK,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,QAAQ;AAAA,MACrD;AAAA,IACF;AAAA,IACA,QAAQ,CAAC,YAAY;AACnB,sBAAgB,OAAO;AACvB,YAAM,WAAW,OAAO;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,SAAO,EAAE,GAAG,QAAQ,YAAY;AAClC;",
   "names": []
 }

package/esm/layouts/{shared → split-layout}/visual-refresh-overrides.js

@@ -38,11 +38,8 @@ const vrResizeHandleContainerOverrides = {
   [`.${dtVisualRefreshEnabled} &::before`]: vrResizeHandleContainerBeforeOverrides,
   ...vrResizeHandleContainerInteractionOverrides
 };
-const vrResizeHandleOverrides = {
-  [`.${dtVisualRefreshEnabled} &`]: {
-    width: 0,
-    cursor: "ew-resize"
-  }
+const vrResizeSeparatorOverrides = {
+  [`.${dtVisualRefreshEnabled} &`]: { width: 0, cursor: "ew-resize" }
 };
 const vrResizeHandleFocusOverrides = {
   backgroundColor: Colors.Border.Neutral.Accent,
@@ -54,6 +51,6 @@ export {
   vrResizeHandleContainerInteractionOverrides,
   vrResizeHandleContainerOverrides,
   vrResizeHandleFocusOverrides,
-  vrResizeHandleOverrides
+  vrResizeSeparatorOverrides
 };
 //# sourceMappingURL=visual-refresh-overrides.js.map

package/esm/layouts/{shared → split-layout}/visual-refresh-overrides.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/layouts/shared/visual-refresh-overrides.ts"],
-  "sourcesContent": ["import Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { dtVisualRefreshEnabled } from '../../core/components/app-root/AppRoot.sty.js';\n\n// Base structural overrides \u2014 used by both inline and overlay resize containers.\nexport const vrResizeHandleContainerBaseOverrides = {\n  borderRadius: 0,\n  height: '100%',\n  width: Spacings.Size8,\n  left: 0,\n  transition: 'none',\n};\n\n// Styles for the ::before pseudo-element that draws the 1px visual divider line.\nexport const vrResizeHandleContainerBeforeOverrides = {\n  content: '\"\"',\n  position: 'absolute' as const,\n  top: 0,\n  bottom: 0,\n  left: '50%',\n  transform: 'translateX(-50%)',\n  width: Borders.Width.Default,\n  backgroundColor: Colors.Border.Neutral.Subdued,\n  pointerEvents: 'none' as const,\n};\n\n// Hover/active color changes applied to the ::before line.\nexport const vrResizeHandleContainerInteractionOverrides = {\n  [`.${dtVisualRefreshEnabled} &:hover::before`]: {\n    backgroundColor: Colors.Border.Neutral.SubduedHover,\n  },\n  [`.${dtVisualRefreshEnabled} &:active::before`]: {\n    backgroundColor: Colors.Border.Neutral.SubduedActive,\n  },\n};\n\n// Complete overrides for INLINE resize containers (between flex siblings in SplitLayout / Panel).\n// Negative marginInline collapses the container to 0px of flex space so adjacent panels connect\n// seamlessly. The container still renders 8px wide (4px each side of the boundary) for interaction.\n// z-index: 1 ensures the container sits above both neighbouring panels.\nexport const vrResizeHandleContainerOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: {\n    ...vrResizeHandleContainerBaseOverrides,\n    backgroundColor: 'transparent',\n    marginInline: `calc(${Spacings.Size8} / -2)`,\n    zIndex: 1,\n  },\n  [`.${dtVisualRefreshEnabled} &::before`]:\n    vrResizeHandleContainerBeforeOverrides,\n  ...vrResizeHandleContainerInteractionOverrides,\n};\n\nexport const vrResizeHandleOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: {\n    width: 0,\n    cursor: 'ew-resize',\n  },\n};\n\n// Applied to the ::before pseudo-element when the resize handle has keyboard focus.\nexport const vrResizeHandleFocusOverrides = {\n  backgroundColor: Colors.Border.Neutral.Accent,\n  width: Borders.Width.Emphasized,\n};\n"],
-  "mappings": "AAAA,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,SAAS,8BAA8B;AAGhC,MAAM,uCAAuC;AAAA,EAClD,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO,SAAS;AAAA,EAChB,MAAM;AAAA,EACN,YAAY;AACd;AAGO,MAAM,yCAAyC;AAAA,EACpD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO,QAAQ,MAAM;AAAA,EACrB,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,eAAe;AACjB;AAGO,MAAM,8CAA8C;AAAA,EACzD,CAAC,IAAI,sBAAsB,kBAAkB,GAAG;AAAA,IAC9C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACzC;AAAA,EACA,CAAC,IAAI,sBAAsB,mBAAmB,GAAG;AAAA,IAC/C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACzC;AACF;AAMO,MAAM,mCAAmC;AAAA,EAC9C,CAAC,IAAI,sBAAsB,IAAI,GAAG;AAAA,IAChC,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,cAAc,QAAQ,SAAS,KAAK;AAAA,IACpC,QAAQ;AAAA,EACV;AAAA,EACA,CAAC,IAAI,sBAAsB,YAAY,GACrC;AAAA,EACF,GAAG;AACL;AAEO,MAAM,0BAA0B;AAAA,EACrC,CAAC,IAAI,sBAAsB,IAAI,GAAG;AAAA,IAChC,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAGO,MAAM,+BAA+B;AAAA,EAC1C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,OAAO,QAAQ,MAAM;AACvB;",
+  "sources": ["../../../../src/layouts/split-layout/visual-refresh-overrides.ts"],
+  "sourcesContent": ["import Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { dtVisualRefreshEnabled } from '../../core/components/app-root/AppRoot.sty.js';\n\n// Base structural overrides \u2014 used by both inline and overlay resize containers.\nexport const vrResizeHandleContainerBaseOverrides = {\n  borderRadius: 0,\n  height: '100%',\n  width: Spacings.Size8,\n  left: 0,\n  transition: 'none',\n};\n\n// Styles for the ::before pseudo-element that draws the 1px visual divider line.\nexport const vrResizeHandleContainerBeforeOverrides = {\n  content: '\"\"',\n  position: 'absolute' as const,\n  top: 0,\n  bottom: 0,\n  left: '50%',\n  transform: 'translateX(-50%)',\n  width: Borders.Width.Default,\n  backgroundColor: Colors.Border.Neutral.Subdued,\n  pointerEvents: 'none' as const,\n};\n\n// Hover/active color changes applied to the ::before line.\nexport const vrResizeHandleContainerInteractionOverrides = {\n  [`.${dtVisualRefreshEnabled} &:hover::before`]: {\n    backgroundColor: Colors.Border.Neutral.SubduedHover,\n  },\n  [`.${dtVisualRefreshEnabled} &:active::before`]: {\n    backgroundColor: Colors.Border.Neutral.SubduedActive,\n  },\n};\n\n// Complete overrides for INLINE resize containers (between flex siblings in SplitLayout / Panel).\n// Negative marginInline collapses the container to 0px of flex space so adjacent panels connect\n// seamlessly. The container still renders 8px wide (4px each side of the boundary) for interaction.\n// z-index: 1 ensures the container sits above both neighbouring panels.\nexport const vrResizeHandleContainerOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: {\n    ...vrResizeHandleContainerBaseOverrides,\n    backgroundColor: 'transparent',\n    marginInline: `calc(${Spacings.Size8} / -2)`,\n    zIndex: 1,\n  },\n  [`.${dtVisualRefreshEnabled} &::before`]:\n    vrResizeHandleContainerBeforeOverrides,\n  ...vrResizeHandleContainerInteractionOverrides,\n};\n\n// The separator itself collapses to 0 under VR; the container's ::before line is the visual divider.\nexport const vrResizeSeparatorOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: { width: 0, cursor: 'ew-resize' },\n};\n\n// Applied to the ::before pseudo-element when the resize handle has keyboard focus.\nexport const vrResizeHandleFocusOverrides = {\n  backgroundColor: Colors.Border.Neutral.Accent,\n  width: Borders.Width.Emphasized,\n};\n"],
+  "mappings": "AAAA,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,SAAS,8BAA8B;AAGhC,MAAM,uCAAuC;AAAA,EAClD,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO,SAAS;AAAA,EAChB,MAAM;AAAA,EACN,YAAY;AACd;AAGO,MAAM,yCAAyC;AAAA,EACpD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO,QAAQ,MAAM;AAAA,EACrB,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,eAAe;AACjB;AAGO,MAAM,8CAA8C;AAAA,EACzD,CAAC,IAAI,sBAAsB,kBAAkB,GAAG;AAAA,IAC9C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACzC;AAAA,EACA,CAAC,IAAI,sBAAsB,mBAAmB,GAAG;AAAA,IAC/C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACzC;AACF;AAMO,MAAM,mCAAmC;AAAA,EAC9C,CAAC,IAAI,sBAAsB,IAAI,GAAG;AAAA,IAChC,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,cAAc,QAAQ,SAAS,KAAK;AAAA,IACpC,QAAQ;AAAA,EACV;AAAA,EACA,CAAC,IAAI,sBAAsB,YAAY,GACrC;AAAA,EACF,GAAG;AACL;AAGO,MAAM,6BAA6B;AAAA,EACxC,CAAC,IAAI,sBAAsB,IAAI,GAAG,EAAE,OAAO,GAAG,QAAQ,YAAY;AACpE;AAGO,MAAM,+BAA+B;AAAA,EAC1C,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,OAAO,QAAQ,MAAM;AACvB;",
   "names": []
 }

package/esm/layouts/surface/Surface.css

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

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-13-3", variantClassNames: { elevation: { flat: "_1qto6jta-3-13-3", raised: "_1qto6jtb-3-13-3", floating: "_1qto6jtc-3-13-3" }, dragged: { true: "_1qto6jtd-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-13-3", variantClassNames: { selected: { true: "_1qto6jt7-3-13-3", false: "_1qto6jt8-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-14-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-14-0", raised: "_1qto6jtb-3-14-0", floating: "_1qto6jtc-3-14-0" }, dragged: { true: "_1qto6jtd-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-14-0", variantClassNames: { selected: { true: "_1qto6jt7-3-14-0", false: "_1qto6jt8-3-14-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-13-3',variantClassNames:{elevation:{flat:'_1qto6jta-3-13-3',raised:'_1qto6jtb-3-13-3',floating:'_1qto6jtc-3-13-3'},dragged:{true:'_1qto6jtd-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-13-3',variantClassNames:{selected:{true:'_1qto6jt7-3-13-3',false:'_1qto6jt8-3-13-3'}},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-14-0',variantClassNames:{elevation:{flat:'_1qto6jta-3-14-0',raised:'_1qto6jtb-3-14-0',floating:'_1qto6jtc-3-14-0'},dragged:{true:'_1qto6jtd-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-14-0',variantClassNames:{selected:{true:'_1qto6jt7-3-14-0',false:'_1qto6jt8-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,QAAO,oBAAmB,UAAS,mBAAkB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,UAAU,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-13-3)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-14-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-13-3)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-14-0)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/Navigation.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { navigationWrapperCSS } from './TitleBar.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Navigation\n * @public\n */\nexport interface TitleBarNavigationProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Navigation slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * TitleBar Navigation component\n * @public\n */\nexport const Navigation = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TitleBarNavigationProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: TitleBarNavigationProps = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(navigationWrapperCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </div>\n  );\n});\n"],
-  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAE3C,SAAS,4BAA4B;AAoB9B,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAA6B;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,sBAAsB,iBAAiB;AAAA,MACvD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { navigationWrapperCSS } from './TitleBar.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Navigation\n * @public\n */\nexport interface TitleBarNavigationProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Navigation slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * TitleBar Navigation component\n * @public\n */\nexport const Navigation = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TitleBarNavigationProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: TitleBarNavigationProps = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(navigationWrapperCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </div>\n  );\n});\n"],
+  "mappings": "AAkCI;AAlCJ,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAE3C,SAAS,4BAA4B;AAmB9B,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAA6B;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,sBAAsB,iBAAiB;AAAA,MACvD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/Suffix.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { suffixWrapperCSS } from './TitleBar.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Suffix\n * @public\n */\nexport interface TitleBarSuffixProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Suffix slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * TitleBar Suffix component\n * @public\n */\nexport const Suffix = forwardRef<HTMLDivElement, TitleBarSuffixProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: TitleBarSuffixProps = props;\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={clsx(suffixWrapperCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "AAiCM;AAjCN,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAE3C,SAAS,wBAAwB;AAoB1B,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAyB;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,QACnD,OAAO;AAAA,QACP,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { suffixWrapperCSS } from './TitleBar.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Suffix\n * @public\n */\nexport interface TitleBarSuffixProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Suffix slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * TitleBar Suffix component\n * @public\n */\nexport const Suffix = forwardRef<HTMLDivElement, TitleBarSuffixProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: TitleBarSuffixProps = props;\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={clsx(suffixWrapperCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "AAgCM;AAhCN,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAE3C,SAAS,wBAAwB;AAmB1B,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAyB;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,QACnD,OAAO;AAAA,QACP,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

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

@@ -9,9 +9,11 @@ const Title = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     children,
     className: consumerClassName,
     style: consumerStyle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    as = "h2",
+    level = 3
   } = props;
-  const childIsText = _canReceiveDefaultTextFormat(props.children);
+  const childIsText = _canReceiveDefaultTextFormat(children);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -19,7 +21,7 @@ const Title = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       className: clsx(textStyleCSS({ textStyle: "base" }), consumerClassName),
       style: consumerStyle,
       "data-testid": dataTestId,
-      children: childIsText ? /* @__PURE__ */ jsx(Heading, { level: 3, as: "h2", children }) : children
+      children: childIsText ? /* @__PURE__ */ jsx(Heading, { level, as, children }) : children
     }
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/Title.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Heading } from '../../typography/heading/Heading.js';\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Title\n * @public\n */\nexport interface TitleBarTitleProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Title slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * TitleBar Title component\n * @public\n */\nexport const Title = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TitleBarTitleProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: TitleBarTitleProps = props;\n  const childIsText = _canReceiveDefaultTextFormat(props.children);\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(textStyleCSS({ textStyle: 'base' }), consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {childIsText ? (\n        <Heading level={3} as=\"h2\">\n          {children}\n        </Heading>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n"],
-  "mappings": "AA4CQ;AA5CR,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAI3C,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,aAAa,oBAAoB;AAC1C,SAAS,eAAe;AAiBjB,MAAM,QAAwB,2BAGnC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAwB;AACxB,QAAM,cAAc,6BAA6B,MAAM,QAAQ;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,aAAa,EAAE,WAAW,OAAO,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ,wBACC,oBAAC,WAAQ,OAAO,GAAG,IAAG,MACnB,UACH,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Heading } from '../../typography/heading/Heading.js';\n\n//#region Typings\n/**\n * Accepted properties for the TitleBar Title\n * @public\n */\nexport interface TitleBarTitleProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the TitleBar Title slot. */\n  children: ReactNode;\n  /**\n   * The semantic HTML heading element rendered by TitleBar.Title.\n   * Use this to fit the TitleBar into your page's document outline.\n   * @defaultValue 'h2'\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /**\n   * The visual heading size. Corresponds to the heading scale defined in the design system.\n   * @defaultValue 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n//#endregion\n\n/**\n * TitleBar Title component\n * @public\n */\nexport const Title = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TitleBarTitleProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    as = 'h2',\n    level = 3,\n  }: TitleBarTitleProps = props;\n  const childIsText = _canReceiveDefaultTextFormat(children);\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(textStyleCSS({ textStyle: 'base' }), consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {childIsText ? (\n        <Heading level={level} as={as}>\n          {children}\n        </Heading>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n"],
+  "mappings": "AAyDQ;AAzDR,OAAO,UAAU;AACjB,SAAS,kBAAkC;AAI3C,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,aAAa,oBAAoB;AAC1C,SAAS,eAAe;AA4BjB,MAAM,QAAwB,2BAGnC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,KAAK;AAAA,IACL,QAAQ;AAAA,EACV,IAAwB;AACxB,QAAM,cAAc,6BAA6B,QAAQ;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,aAAa,EAAE,WAAW,OAAO,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ,wBACC,oBAAC,WAAQ,OAAc,IACpB,UACH,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;",
   "names": []
 }

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

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

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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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    BehaviorTrackingProps {\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 [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\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        {...restProps}\n        {...behavioralTrackingProps}\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 }} aria-hidden />\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": "AAiGY,SAwBF,KAxBE;AAjGZ,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,kCAAkC;AAC3C,SAAS,gBAAgB;AAMzB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,eAAe;AACxB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AA0BvB,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,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,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,QACH,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,eAAW,MAAC;AAAA;AAAA;AAAA,IAExE;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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\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 [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\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        {...restProps}\n        {...behavioralTrackingProps}\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 }} aria-hidden />\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": "AAkGY,SAwBF,KAxBE;AAlGZ,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,kCAAkC;AAC3C,SAAS,gBAAgB;AAMzB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,eAAe;AACxB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AA2BvB,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,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,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,QACH,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,eAAW,MAAC;AAAA;AAAA;AAAA,IAExE;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": []
 }