@dynatrace/strato-components 3.10.4 → 3.11.1

package/charts/honeycomb/HoneycombChart.d.ts

@@ -3,8 +3,16 @@ import { HoneycombChartProps, HoneycombChartRef } from './types/honeycomb.js';
 /** The honeycomb component */
 export declare const _HoneycombChart: (props: PropsWithChildren<HoneycombChartProps> & import("react").RefAttributes<HoneycombChartRef>) => import("react").ReactElement | null;
 /**
- * The `HoneycombChart` is used to display data in a grid using various shapes
- * for data points.
+ * The `HoneycombChart` displays data in a grid of tiles (shaped as hexagons,
+ * squares, or circles), one tile per datapoint.
+ *
+ * Provide `data` in the unified `ChartData` format — a flat array of objects.
+ * The tile value is resolved through the `valueAccessor` prop, which defaults
+ * to `"value"` and supports dot-notation for nested fields (e.g.
+ * `"metrics.responseTime"`). Values can be numeric (numerical hive) or string
+ * (categorical hive). Coloring is controlled with the `colorPalette` prop.
+ *
+ * @see {@link HoneycombChartAccessorDataProps}
  * @public
  */
 export declare const HoneycombChart: ((props: PropsWithChildren<HoneycombChartProps> & import("react").RefAttributes<HoneycombChartRef>) => import("react").ReactElement | null) & {

package/charts/honeycomb/HoneycombChart.sty.js

@@ -21,4 +21,4 @@ __export(HoneycombChart_css_exports, {
 });
 module.exports = __toCommonJS(HoneycombChart_css_exports);
 var import_HoneycombChart_css_ts_vanilla = require("./HoneycombChart.css");
-var graphContainer = "_p8cogi0-3-10-4";
+var graphContainer = "_p8cogi0-3-11-1";

package/charts/honeycomb/components/HiveOverlay.css

@@ -1,4 +1,4 @@
-._lmrhfg0-3-10-4 {
+._lmrhfg0-3-11-1 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/HiveOverlay.sty.js

@@ -21,4 +21,4 @@ __export(HiveOverlay_css_exports, {
 });
 module.exports = __toCommonJS(HiveOverlay_css_exports);
 var import_HiveOverlay_css_ts_vanilla = require("./HiveOverlay.css");
-var overlay = "_lmrhfg0-3-10-4";
+var overlay = "_lmrhfg0-3-11-1";

package/charts/honeycomb/components/canvas/HiveCanvasLayout.css

@@ -1,4 +1,4 @@
-._12htcxh0-3-10-4 {
+._12htcxh0-3-11-1 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/canvas/HiveCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(HiveCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(HiveCanvasLayout_css_exports);
 var import_HiveCanvasLayout_css_ts_vanilla = require("./HiveCanvasLayout.css");
-var canvasContainer = "_12htcxh0-3-10-4";
+var canvasContainer = "_12htcxh0-3-11-1";

package/charts/index.d.ts

@@ -2,7 +2,6 @@ export type { Variant as _Variant, VariantShape as _VariantShape, PointShapeType
 export type { InteractionMode as _InteractionMode, InteractionsOverlayProps as _InteractionsOverlayProps, InteractionTriggers as _InteractionTriggers, KeyboardOnlyInteractionTriggers as _KeyboardOnlyInteractionTriggers, ZoomBehavior as _ZoomBehavior, } from './core/components/interactions-overlay/types.js';
 export { InteractionsOverlay as _InteractionsOverlay } from './core/components/interactions-overlay/InteractionsOverlay.js';
 export type { RelativeAbsolutePosition as _RelativeAbsolutePosition } from './core/types/pointer-events.js';
-export type { AriaLabel as _AriaLabel } from './core/types/aria-label.js';
 export type { AnyNumberScale as _AnyNumberScale, DateScales as _DateScales, NumericScales as _NumericScales, } from './core/types/scales.js';
 export { AnnotationsChartConfig } from './annotations-chart/contexts/AnnotationsChartConfig.context.js';
 export { AnnotationsChart } from './annotations-chart/AnnotationsChart.js';
@@ -56,7 +55,7 @@ export type { ThresholdIndicatorData as _ThresholdIndicatorData, ThresholdIndica
 export { ChartToolbarRenderer as _ChartToolbarRenderer } from './core/components/toolbar/ChartToolbarRenderer.js';
 export type { ChartToolbarRendererProps as _ChartToolbarRendererProps, IntentsAsyncTemplate as _IntentsAsyncTemplate, MenuDisplayMode as _MenuDisplayMode, menuDisplayModes as _menuDisplayModes, ToolbarHanderRef as _ToolbarHanderRef, } from './core/components/toolbar/types.js';
 export type { InternalChartToolbarConfigured as _InternalChartToolbarConfigured } from './core/types/toolbar.js';
-export type { ChartToolbarControlProps as _ChartToolbarControlProps } from './core/components/toolbar/components/Control.js';
+export type { ChartToolbarControlProps as _ChartToolbarControlProps, ChartToolbarControlShortcutProps as _ChartToolbarControlShortcutProps, } from './core/components/toolbar/components/Control.js';
 export type { Point as _Point } from './core/types/point.js';
 /** @deprecated Use `ChartTooltip` instead. Removal: APPDEV-17834 */
 export { ChartTooltip as _ChartTooltip } from './core/components/tooltip/ChartTooltip/ChartTooltip.js';
@@ -176,7 +175,7 @@ export type { ErrorStateSlotProps as ErrorStateProps } from './core/slots/chart-
 export { ChartToolbar } from './core/slots/toolbar/ChartToolbar.js';
 export type { CompactToolbarProps } from './core/slots/toolbar/CompactToolbar.tsx';
 export type { ChartMessage } from './core/types/chart-message.js';
-export type { ChartData, ChartDatapoint } from './core/types/chart-data.js';
+export type { ChartColorPalette, ChartData, ChartDatapoint, } from './core/types/chart-data.js';
 export type { ChartUnit } from './core/types/chart-unit.js';
 export type { ColorPalette, CustomColorPalette, ColorPaletteMode, ColorToken, AutomaticColorPalette as _AutomaticColorPalette, ThemedColorPalette as _ThemedColorPalette, ColorPaletteDefinition as _ColorPaletteDefinition, } from './core/types/color-palette.js';
 export type { DateString } from './core/types/dates.js';
@@ -231,6 +230,9 @@ export type { DonutChartAccessorDataProps, DonutChartBaseProps, DonutChartData,
 export type { PieChartSlotProps } from './pie/types/toolbar.js';
 export type { PieChartToolbarSlotProps } from './pie/types/toolbar.js';
 export type { PieChartToolbarConfig } from './pie/types/toolbar.js';
+export { SankeyChart as _SankeyChart } from './sankey-chart/SankeyChartRoot.js';
+export type { SankeyChartProps as _SankeyChartProps, SankeyChartBaseProps as _SankeyChartBaseProps, SankeyNodeProps as _SankeyNodeProps, SankeyChartNodesProps as _SankeyChartNodesProps, } from './sankey-chart/types/sankey-props.js';
+export type { SankeyNodeAlignment as _SankeyNodeAlignment } from './sankey-chart/types/sankey.js';
 export { SingleValue } from './single-value/SingleValue.js';
 export { SingleValueGrid } from './single-value-grid/SingleValueGrid.js';
 export type { SingleValueGridProps } from './single-value-grid/types/single-value-grid.js';
@@ -297,7 +299,7 @@ export type { XYChartProps, XYChartRectSeriesProps, ColorSelectionProp, ShapeCol
 export type { XYChartTooltipBodyProps as _XYChartTooltipBodyProps } from './xy-chart/components/tooltip/XYChartTooltipBody/XYChartTooltipBody.js';
 export { XYChartTooltipBody as _XYChartTooltipBody } from './xy-chart/components/tooltip/XYChartTooltipBody/XYChartTooltipBody.js';
 export { TopList } from './top-list/TopList.js';
-export type { TopListProps } from './top-list/TopList.js';
+export type { TopListActionItem, TopListProps } from './top-list/TopList.js';
 export type { _XYChartAdoptionProps } from './xy-chart-adoption/shared/types/props.js';
 export type { _XYChartLegacyProps } from './xy-chart-adoption/shared/types/legacy-props.js';
 export type { GanttChartConfig, GanttChartFormatter, GanttChartFormatterCurrencyOptions, GanttSegmentData, GanttAnnotationsHeaderConfig, GanttAnnotationsMarkerProps, GanttAnnotationsTrackConfig, } from './gantt-chart/types/gantt-chart.js';
@@ -332,4 +334,10 @@ export type { ChartTooltipAtomsType as _ChartTooltipAtomsType } from './core/com
 export type { ChartTooltipSlotsType as _ChartTooltipSlotsType } from './core/components/tooltip/types/ChartTooltip.config.js';
 export { colorPaletteMap as _colorPaletteMap } from './core/types/color-palettes-definitions.js';
 export { automaticColoringMap as _automaticColoringMap } from './core/types/color-palettes-definitions.js';
+/** @internal */
+export { FlameChart as _FlameChart } from './flame/flame-chart/FlameChart.js';
+/** @internal */
+export { FlameGraph as _FlameGraph } from './flame/flame-graph/FlameGraph.js';
+/** @internal */
+export type { FlameChartProps as _FlameChartProps, FlameGraphProps as _FlameGraphProps, FlameOrientation as _FlameOrientation, } from './flame/shared/types/flame-chart.js';
 //# sourceMappingURL=index.d.ts.map

package/charts/index.js

@@ -72,6 +72,8 @@ __export(charts_exports, {
   _ErrorState: () => import_ErrorState.ErrorState,
   _EventItem: () => import_EventItem.EventItem,
   _FPS: () => import_constants.SIXTY_FPS,
+  _FlameChart: () => import_FlameChart.FlameChart,
+  _FlameGraph: () => import_FlameGraph.FlameGraph,
   _GEO_DEFAULTS: () => import_defaults.GEO_DEFAULTS,
   _GeoItem: () => import_GeoItem.GeoItem,
   _InteractionsOverlay: () => import_InteractionsOverlay.InteractionsOverlay,
@@ -83,6 +85,7 @@ __export(charts_exports, {
   _OverlayTooltip: () => import_OverlayTooltip.OverlayTooltip,
   _OverlayTooltipProvider: () => import_TooltipContext.TooltipProvider,
   _RangeLegend: () => import_RangeLegend.RangeLegend,
+  _SankeyChart: () => import_SankeyChartRoot.SankeyChart,
   _SeriesItem: () => import_SeriesItem.SeriesItem,
   _TextHeader: () => import_TextHeader.TextHeader,
   _ThresholdBar: () => import_ThresholdBar.ThresholdBar,
@@ -229,6 +232,7 @@ var import_MeterBarChartConfigContext = require("./meter-bar/single-meter-bar/co
 var import_PieChart = require("./pie/PieChart.js");
 var import_DonutChart = require("./pie/DonutChart.js");
 var import_ChartConfigContext = require("./pie/context/ChartConfigContext.js");
+var import_SankeyChartRoot = require("./sankey-chart/SankeyChartRoot.js");
 var import_SingleValue = require("./single-value/SingleValue.js");
 var import_SingleValueGrid = require("./single-value-grid/SingleValueGrid.js");
 var import_use_single_value_config = require("./single-value/hooks/use-single-value-config.js");
@@ -254,3 +258,5 @@ var import_GaugeChart = require("./gauge/GaugeChart.js");
 var import_GaugeChartConfigContext = require("./gauge/contexts/GaugeChartConfigContext.js");
 var import_color_palettes_definitions = require("./core/types/color-palettes-definitions.js");
 var import_color_palettes_definitions2 = require("./core/types/color-palettes-definitions.js");
+var import_FlameChart = require("./flame/flame-chart/FlameChart.js");
+var import_FlameGraph = require("./flame/flame-graph/FlameGraph.js");

package/charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js

@@ -64,6 +64,10 @@ const MultiMeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     "data-testid": dataTestId = "multi-meter-bar-chart-root",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails,
     seriesActions,
     prefixIcon
   } = props;
@@ -126,7 +130,10 @@ const MultiMeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
           "data-testid": dataTestId,
-          "aria-label": import_constants.MULTIMETER_BAR_CHART_ARIA_LABEL,
+          "aria-label": ariaLabel ?? import_constants.MULTIMETER_BAR_CHART_ARIA_LABEL,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-details": ariaDetails,
           "data-dt-component": COMPONENT_NAME,
           consumerConfig,
           userRef: forwardedRef,

package/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react-markdown';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+import type { AriaLabelingProps } from '../../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
@@ -20,7 +21,7 @@ export type MultiMeterBarSegmentData = {
 /**
  * @public
  */
-export interface MultiMeterBarChartProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
+export interface MultiMeterBarChartProps extends StylingProps, MaskingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * The chart width. A valid CSS width is expected.
      * @defaultValue 100%

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.css

@@ -1,68 +1,71 @@
-._1m3udw10-3-10-4 {
+._1m3udw10-3-11-1 {
   display: flex;
   justify-content: center;
   grid-area: value;
   align-self: self-end;
   justify-self: end;
 }
-._1m3udw11-3-10-4 {
+._1m3udw11-3-11-1 {
   margin-bottom: var(--dt-spacings-size-2, 2px);
   align-items: center;
   height: 20px;
 }
-._1m3udw12-3-10-4 {
+._1m3udw12-3-11-1 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
   align-items: end;
   height: 100%;
 }
-._1m3udw13-3-10-4 {
+._1m3udw13-3-11-1 {
   min-width: 0;
   transition: margin-right var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1m3udw14-3-10-4 {
+._1m3udw14-3-11-1 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   transition: all var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1m3udw15-3-10-4 {
+._1m3udw15-3-11-1 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: min;
   align-self: center;
 }
-._1m3udw16-3-10-4 {
+._1m3udw16-3-11-1 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: max;
   align-self: center;
   justify-self: end;
 }
-._1m3udw17-3-10-4 {
+._1m3udw17-3-11-1 {
   grid-area: legend;
   margin: var(--dt-spacings-size-4, 4px) 0 var(--dt-spacings-size-4, 4px);
 }
-._1m3udw18-3-10-4 {
+._1m3udw18-3-11-1 {
   gap: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-2, 2px);
   grid-area: label;
 }
-._1m3udw19-3-10-4 {
+._1m3udw19-3-11-1 {
   grid-area: chart;
 }
-._1m3udw1a-3-10-4 {
+._1m3udw1a-3-11-1 {
+  grid-area: thresholds;
+}
+._1m3udw1b-3-11-1 {
   width: 100%;
 }
-._1m3udw1b-3-10-4 {
+._1m3udw1c-3-11-1 {
   height: 100%;
 }
-._1m3udw1c-3-10-4 {
+._1m3udw1d-3-11-1 {
   height: fit-content;
 }
-._1m3udw1d-3-10-4 {
+._1m3udw1e-3-11-1 {
   position: relative;
   display: block;
   cursor: default;
   user-select: none;
 }
-._1m3udw1e-3-10-4 {
+._1m3udw1f-3-11-1 {
   overflow: hidden;
 }

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.css.d.ts

@@ -19,6 +19,7 @@ export declare const maxContainer: string;
 export declare const legendContainer: string;
 export declare const labelContainer: string;
 export declare const chartContainer: string;
+export declare const thresholdsContainer: string;
 export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
     autoSize: {
         true: {

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.d.ts

@@ -1,13 +1,13 @@
 import { type PropsWithChildren, Ref } from 'react';
+import type { AriaLabelingProps } from '../../../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../../core/types/styling-props.js';
-import type { AriaLabel } from '../../../../core/types/aria-label.js';
 import type { MultiMeterBarChartConsumerConfig } from '../../../multi-meter-bar/types/multi-meter-bar-chart-config.js';
 import type { MeterBarChartConsumerConfig } from '../../../single-meter-bar/types/meter-bar-chart-config.js';
 import type { MeterBarChartElementRef, MeterBarSize } from '../../types/meter-bars.js';
-export interface MeterBarLayoutProps extends StylingProps, MaskingProps, DataTestId, AriaLabel, BehaviorTrackingProps {
+export interface MeterBarLayoutProps extends StylingProps, MaskingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * The size that applies to the value, icon, and label.
      * @defaultvalue 'size16'
@@ -67,5 +67,9 @@ export declare const MeterBarLayout: ((props: MeterBarLayoutProps & {
         ({ children }: PropsWithChildren): import("react").JSX.Element | null;
         displayName: string;
     };
+    Thresholds: {
+        ({ children }: PropsWithChildren): import("react").JSX.Element | null;
+        displayName: string;
+    };
 };
 //# sourceMappingURL=MeterBarLayout.d.ts.map

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.js

@@ -44,6 +44,7 @@ var import_Legend = require("./slots/Legend.js");
 var import_Max = require("./slots/Max/Max.js");
 var import_Min = require("./slots/Min/Min.js");
 var import_Providers = require("./slots/Providers.js");
+var import_Thresholds = require("./slots/Thresholds.js");
 var import_Value = require("./slots/Value/Value.js");
 var import_extract_slots = require("./utils/extract-slots.js");
 var import_useBehavioralTrackingProps = require("../../../../../core/hooks/useBehavioralTrackingProps.js");
@@ -71,11 +72,14 @@ const MeterBarLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-testid": dataTestId,
     "data-dt-component": dataDtComponent,
     "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails,
     userRef,
     consumerConfig = {}
   } = props;
   const containerRef = (0, import_react.useRef)(null);
-  const { label, min, max, value, chart, icon, legend, providers } = (0, import_extract_slots.extractSlots)(children);
+  const { label, min, max, value, chart, icon, legend, thresholds, providers } = (0, import_extract_slots.extractSlots)(children);
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const loading = (0, import_MeterBarChartLoadingContext.useMeterBarChartLoading)();
   const { isToolbarEnabled, modifyHoverState, toolbarRef } = (0, import_useMeterBarChartToolbar.useMeterBarChartToolbar)();
@@ -89,7 +93,7 @@ const MeterBarLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     };
   });
   const hasAutoSize = size === import_constants.METER_BAR_SIZE.Auto;
-  const gridTemplateRows = hasAutoSize ? "auto 1fr auto auto" : "auto";
+  const gridTemplateRows = hasAutoSize ? "auto 1fr auto auto auto" : "auto";
   const {
     segmentSize: { height: segmentHeight, width: segmentWidth },
     labelRef,
@@ -125,12 +129,15 @@ const MeterBarLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
             import_Grid.Grid,
             {
               className: (0, import_MeterBarLayout_css.container)({ autoSize: hasAutoSize }),
-              gridTemplateAreas: "\n            'label label label value'\n            'chart chart chart chart'\n            'min min max max'\n            'legend legend legend legend'",
+              gridTemplateAreas: "\n            'label label label value'\n            'chart chart chart chart'\n            'thresholds thresholds thresholds thresholds'\n            'min min max max'\n            'legend legend legend legend'",
               gridTemplateColumns: "25% 25% 25% 25%",
               gridTemplateRows,
               rowGap: 0,
               columnGap: 0,
               "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-details": ariaDetails,
               role: "img",
               onMouseEnter: () => modifyHoverState(true),
               onMouseLeave: () => modifyHoverState(false),
@@ -169,6 +176,7 @@ const MeterBarLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_MeterBarLayout_css.chartContainer, ref: plotAreaRef, children: chart }),
+                    thresholds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_MeterBarLayout_css.thresholdsContainer, children: thresholds }),
                     min && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: minLabelRef, className: import_MeterBarLayout_css.minContainer, children: min }),
                     max && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: maxLabelRef, className: import_MeterBarLayout_css.maxContainer, children: max }),
                     legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: legendRef, className: import_MeterBarLayout_css.legendContainer, children: legend }),
@@ -198,5 +206,6 @@ const MeterBarLayout = Object.assign(MeterBarLayoutRoot, {
   Value: import_Value.Value,
   Icon: import_Icon.Icon,
   Providers: import_Providers.Providers,
-  Legend: import_Legend.Legend
+  Legend: import_Legend.Legend,
+  Thresholds: import_Thresholds.Thresholds
 });

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.sty.js

@@ -24,6 +24,7 @@ __export(MeterBarLayout_css_exports, {
   legendContainer: () => legendContainer,
   maxContainer: () => maxContainer,
   minContainer: () => minContainer,
+  thresholdsContainer: () => thresholdsContainer,
   toolbarAnimatedContainer: () => toolbarAnimatedContainer,
   valueAnimatedContainer: () => valueAnimatedContainer,
   valueContainer: () => valueContainer
@@ -31,13 +32,14 @@ __export(MeterBarLayout_css_exports, {
 module.exports = __toCommonJS(MeterBarLayout_css_exports);
 var import_MeterBarLayout_css_ts_vanilla = require("./MeterBarLayout.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartContainer = "_1m3udw19-3-10-4";
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw1a-3-10-4", variantClassNames: { autoSize: { true: "_1m3udw1b-3-10-4", false: "_1m3udw1c-3-10-4" }, showLoading: { true: "_1m3udw1d-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var containerWrapper = "_1m3udw1e-3-10-4";
-var labelContainer = "_1m3udw18-3-10-4";
-var legendContainer = "_1m3udw17-3-10-4";
-var maxContainer = "_1m3udw16-3-10-4";
-var minContainer = "_1m3udw15-3-10-4";
-var toolbarAnimatedContainer = "_1m3udw14-3-10-4";
-var valueAnimatedContainer = "_1m3udw13-3-10-4";
-var valueContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw10-3-10-4", variantClassNames: { inline: { true: "_1m3udw11-3-10-4", false: "_1m3udw12-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var chartContainer = "_1m3udw19-3-11-1";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw1b-3-11-1", variantClassNames: { autoSize: { true: "_1m3udw1c-3-11-1", false: "_1m3udw1d-3-11-1" }, showLoading: { true: "_1m3udw1e-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var containerWrapper = "_1m3udw1f-3-11-1";
+var labelContainer = "_1m3udw18-3-11-1";
+var legendContainer = "_1m3udw17-3-11-1";
+var maxContainer = "_1m3udw16-3-11-1";
+var minContainer = "_1m3udw15-3-11-1";
+var thresholdsContainer = "_1m3udw1a-3-11-1";
+var toolbarAnimatedContainer = "_1m3udw14-3-11-1";
+var valueAnimatedContainer = "_1m3udw13-3-11-1";
+var valueContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw10-3-11-1", variantClassNames: { inline: { true: "_1m3udw11-3-11-1", false: "_1m3udw12-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.css

@@ -1,9 +1,9 @@
-._18riimf0-3-10-4 {
+._18riimf0-3-11-1 {
   width: 20px;
   height: 20px;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._18riimf0-3-10-4 > svg {
+._18riimf0-3-11-1 > svg {
   width: 100%;
   height: 100%;
 }

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.sty.js

@@ -21,4 +21,4 @@ __export(Icon_css_exports, {
 });
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
-var container = "_18riimf0-3-10-4";
+var container = "_18riimf0-3-11-1";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.css

@@ -1,4 +1,4 @@
-._bh277f0-3-10-4 {
+._bh277f0-3-11-1 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.sty.js

@@ -21,4 +21,4 @@ __export(Label_css_exports, {
 });
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
-var labelStyle = "_bh277f0-3-10-4";
+var labelStyle = "_bh277f0-3-11-1";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css

@@ -1,4 +1,4 @@
-._xxg5xc0-3-10-4 {
+._xxg5xc0-3-11-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js

@@ -21,4 +21,4 @@ __export(Max_css_exports, {
 });
 module.exports = __toCommonJS(Max_css_exports);
 var import_Max_css_ts_vanilla = require("./Max.css");
-var maxValue = "_xxg5xc0-3-10-4";
+var maxValue = "_xxg5xc0-3-11-1";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css

@@ -1,4 +1,4 @@
-._16mgjbd0-3-10-4 {
+._16mgjbd0-3-11-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js

@@ -21,4 +21,4 @@ __export(Min_css_exports, {
 });
 module.exports = __toCommonJS(Min_css_exports);
 var import_Min_css_ts_vanilla = require("./Min.css");
-var minValue = "_16mgjbd0-3-10-4";
+var minValue = "_16mgjbd0-3-11-1";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Thresholds.d.ts

@@ -0,0 +1,6 @@
+import { type PropsWithChildren } from 'react';
+export declare const Thresholds: {
+    ({ children }: PropsWithChildren): import("react").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=Thresholds.d.ts.map

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Thresholds.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Thresholds_exports = {};
+__export(Thresholds_exports, {
+  Thresholds: () => Thresholds
+});
+module.exports = __toCommonJS(Thresholds_exports);
+var import_jsx_runtime = (
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  require("react/jsx-runtime")
+);
+const Thresholds = ({ children }) => children !== void 0 && children !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }) : null;
+Thresholds["displayName"] = "MeterBarLayout.Thresholds";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css

@@ -1,4 +1,4 @@
-._1euwfb00-3-10-4 {
+._1euwfb00-3-11-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js

@@ -21,4 +21,4 @@ __export(Value_css_exports, {
 });
 module.exports = __toCommonJS(Value_css_exports);
 var import_Value_css_ts_vanilla = require("./Value.css");
-var valueStyle = "_1euwfb00-3-10-4";
+var valueStyle = "_1euwfb00-3-11-1";

package/charts/meter-bar/shared/components/meter-bar-layout/utils/extract-slots.d.ts

@@ -12,6 +12,7 @@ export declare function extractSlots(children?: ReactNode): {
     value?: ReactNode;
     icon?: ReactNode;
     legend?: ReactNode;
+    thresholds?: ReactNode;
     providers?: {
         Component: ExoticComponent;
         props: Record<string, unknown>;

package/charts/meter-bar/shared/components/meter-bar-layout/utils/extract-slots.js

@@ -29,6 +29,7 @@ var import_Legend = require("../slots/Legend.js");
 var import_Max = require("../slots/Max/Max.js");
 var import_Min = require("../slots/Min/Min.js");
 var import_Providers = require("../slots/Providers.js");
+var import_Thresholds = require("../slots/Thresholds.js");
 var import_Value = require("../slots/Value/Value.js");
 function extractSlots(children) {
   const areas = {};
@@ -47,6 +48,8 @@ function extractSlots(children) {
       areas.max = child;
     } else if ((0, import_is_slot.isSlot)(child, import_Legend.Legend)) {
       areas.legend = child;
+    } else if ((0, import_is_slot.isSlot)(child, import_Thresholds.Thresholds)) {
+      areas.thresholds = child;
     } else if ((0, import_is_slot.isSlot)(child, import_Providers.Providers)) {
       areas.providers = {
         Component: child.props.providerName,

package/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css

@@ -1,4 +1,4 @@
-._12md1g60-3-10-4 {
+._12md1g60-3-11-1 {
   background-color: var(--dt-colors-theme-neutral-40, #dadbe4);
   width: 100%;
   display: block;

package/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.js

@@ -33,19 +33,18 @@ module.exports = __toCommonJS(MeterBarPlot_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_MeterBarPlot_css = require("./MeterBarPlot.sty.js");
-var import_constants = require("../../../single-meter-bar/constants.js");
-var import_constants2 = require("../../constants.js");
+var import_constants = require("../../constants.js");
 var import_MeterBarLayoutSizeContext = require("../../context/MeterBarLayoutSizeContext.js");
 var import_element_size_css = require("../../styles/element-size.sty.js");
 const MeterBarPlot = ({ children }) => {
   const { size, segmentHeight } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
-  const isSegmentHeight = size === import_constants2.METER_BAR_SIZE.Auto;
+  const isSegmentHeight = size === import_constants.METER_BAR_SIZE.Auto;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       height: isSegmentHeight ? segmentHeight : void 0,
       className: (0, import_clsx.default)(import_MeterBarPlot_css.svgElement, (0, import_element_size_css.elementSize)({ size })),
-      "aria-label": import_constants.METER_BAR_CHART_PLOT_ARIA_LABEL,
+      "aria-hidden": "true",
       children
     }
   );

package/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js

@@ -21,4 +21,4 @@ __export(MeterBarPlot_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarPlot_css_exports);
 var import_MeterBarPlot_css_ts_vanilla = require("./MeterBarPlot.css");
-var svgElement = "_12md1g60-3-10-4";
+var svgElement = "_12md1g60-3-11-1";

package/charts/meter-bar/shared/styles/element-size.css

@@ -1,12 +1,12 @@
-._1ckoljy1-3-10-4 {
+._1ckoljy1-3-11-1 {
   height: 100%;
 }
-._1ckoljy2-3-10-4 {
+._1ckoljy2-3-11-1 {
   height: 16px;
 }
-._1ckoljy3-3-10-4 {
+._1ckoljy3-3-11-1 {
   height: 24px;
 }
-._1ckoljy4-3-10-4 {
+._1ckoljy4-3-11-1 {
   height: 8px;
 }

package/charts/meter-bar/shared/styles/element-size.sty.js

@@ -22,4 +22,4 @@ __export(element_size_css_exports, {
 module.exports = __toCommonJS(element_size_css_exports);
 var import_element_size_css_ts_vanilla = require("./element-size.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ckoljy0-3-10-4", variantClassNames: { size: { auto: "_1ckoljy1-3-10-4", size16: "_1ckoljy2-3-10-4", size24: "_1ckoljy3-3-10-4", size8: "_1ckoljy4-3-10-4" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
+var elementSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ckoljy0-3-11-1", variantClassNames: { size: { auto: "_1ckoljy1-3-11-1", size16: "_1ckoljy2-3-11-1", size24: "_1ckoljy3-3-11-1", size8: "_1ckoljy4-3-11-1" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });

package/charts/meter-bar/shared/styles.css

@@ -1,4 +1,4 @@
-._16sdwow0-3-10-4 {
+._16sdwow0-3-11-1 {
   position: relative;
   z-index: 1;
 }