@dynatrace/strato-components 3.1.3 → 3.2.0

package/esm/charts/core/components/sparkline-display/Sparkline.sty.js

@@ -1,7 +1,7 @@
 import "./Sparkline.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var contextValueText = _7a468({ defaultClassName: "_8d5rf80-3-1-3", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-1-3", greaterOrEqual32: "_8d5rf82-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var negativeSign = _7a468({ defaultClassName: "_8d5rf83-3-1-3", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-1-3", height32: "_8d5rf85-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var contextValueText = _7a468({ defaultClassName: "_8d5rf80-3-2-0", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-2-0", greaterOrEqual32: "_8d5rf82-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var negativeSign = _7a468({ defaultClassName: "_8d5rf83-3-2-0", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-2-0", height32: "_8d5rf85-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   contextValueText,
   negativeSign

package/esm/charts/core/components/sparkline-display/Sparkline.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/sparkline-display/Sparkline.css.ts"],
-  "sourcesContent": ["import './Sparkline.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var contextValueText = _7a468({defaultClassName:'_8d5rf80-3-1-3',variantClassNames:{fontSize:{smallerThan32:'_8d5rf81-3-1-3',greaterOrEqual32:'_8d5rf82-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var negativeSign = _7a468({defaultClassName:'_8d5rf83-3-1-3',variantClassNames:{containerHeight:{height24:'_8d5rf84-3-1-3',height32:'_8d5rf85-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Sparkline.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var contextValueText = _7a468({defaultClassName:'_8d5rf80-3-2-0',variantClassNames:{fontSize:{smallerThan32:'_8d5rf81-3-2-0',greaterOrEqual32:'_8d5rf82-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var negativeSign = _7a468({defaultClassName:'_8d5rf83-3-2-0',variantClassNames:{containerHeight:{height24:'_8d5rf84-3-2-0',height32:'_8d5rf85-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,eAAc,kBAAiB,kBAAiB,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxM,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,iBAAgB,EAAC,UAAS,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.css

@@ -1,4 +1,4 @@
-._ix5ox20-3-1-3 {
+._ix5ox20-3-2-0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,25 +9,25 @@
   text-decoration: inherit;
   width: 100%;
 }
-._ix5ox21-3-1-3 {
+._ix5ox21-3-2-0 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._ix5ox21-3-1-3::after, ._ix5ox21-3-1-3::before {
+._ix5ox21-3-2-0::after, ._ix5ox21-3-2-0::before {
   content: "‎";
 }
-._ix5ox22-3-1-3 {
+._ix5ox22-3-2-0 {
   text-overflow: ellipsis;
 }
-._ix5ox24-3-1-3 {
+._ix5ox24-3-2-0 {
   position: relative;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
 }
-._ix5ox24-3-1-3::after {
+._ix5ox24-3-2-0::after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -36,7 +36,7 @@
   user-select: none;
   overflow: hidden;
 }
-._ix5ox25-3-1-3 {
+._ix5ox25-3-2-0 {
   white-space: nowrap;
   display: block;
   overflow: hidden;

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js

@@ -1,8 +1,8 @@
 import "./ChartTextEllipsis.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-1-3", variantClassNames: { truncationMode: { start: "_ix5ox21-3-1-3", end: "_ix5ox22-3-1-3", middle: "_ix5ox23-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-1-3";
-var truncationText = "_ix5ox25-3-1-3";
+var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-2-0", variantClassNames: { truncationMode: { start: "_ix5ox21-3-2-0", end: "_ix5ox22-3-2-0", middle: "_ix5ox23-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-2-0";
+var truncationText = "_ix5ox25-3-2-0";
 export {
   ellipsis,
   truncationContainer,

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/text-ellipsis/ChartTextEllipsis.css.ts"],
-  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-1-3',variantClassNames:{truncationMode:{start:'_ix5ox21-3-1-3',end:'_ix5ox22-3-1-3',middle:'_ix5ox23-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-1-3';\nexport var truncationText = '_ix5ox25-3-1-3';"],
+  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-2-0',variantClassNames:{truncationMode:{start:'_ix5ox21-3-2-0',end:'_ix5ox22-3-2-0',middle:'_ix5ox23-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-2-0';\nexport var truncationText = '_ix5ox25-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,OAAM,kBAAiB,KAAI,kBAAiB,QAAO,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzM,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/ThresholdBar.js

@@ -10,11 +10,12 @@ const ThresholdBarInternal = (props) => {
       "div",
       {
         style: { width: length, height: THRESHOLD_BAR_THICKNESS },
-        "data-testid": "threshold-bar-horizontal",
+        role: "graphics-symbol",
+        "aria-label": "threshold bar horizontal",
         children: /* @__PURE__ */ jsx(ThresholdBarTemplate, { ...props })
       }
     )
-  ) : /* @__PURE__ */ jsx("div", { "data-testid": "threshold-bar-vertical", children: /* @__PURE__ */ jsx(ThresholdBarTemplate, { ...props }) });
+  ) : /* @__PURE__ */ jsx("div", { role: "graphics-symbol", "aria-label": "threshold bar vertical", children: /* @__PURE__ */ jsx(ThresholdBarTemplate, { ...props }) });
 };
 ThresholdBarInternal["displayName"] = "ThresholdBarInternal";
 const ThresholdBar = memo(ThresholdBarInternal);

package/esm/charts/core/components/threshold-bar/ThresholdBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/ThresholdBar.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\n\nimport { ThresholdBarTemplate } from './ThresholdBarTemplate.js';\nimport { THRESHOLD_BAR_THICKNESS } from './types/constants.js';\nimport type { ThresholdBarProps } from './types.js';\n\nconst ThresholdBarInternal = (props: ThresholdBarProps) => {\n  const { length, layout = 'vertical' } = props;\n\n  return layout === 'horizontal' ? (\n    /* This is needed to adapt the container to the rotated threshold bar */\n    (<div\n      style={{ width: length, height: THRESHOLD_BAR_THICKNESS }}\n      data-testid=\"threshold-bar-horizontal\"\n    >\n      <ThresholdBarTemplate {...props} />\n    </div>)\n  ) : (\n    <div data-testid=\"threshold-bar-vertical\">\n      <ThresholdBarTemplate {...props} />\n    </div>\n  );\n};\n\nThresholdBarInternal['displayName'] = 'ThresholdBarInternal';\n\n/**\n * @internal\n */\nexport const ThresholdBar = memo(ThresholdBarInternal);\n\nThresholdBar['displayName'] = 'ThresholdBar';\n"],
-  "mappings": "AAeM;AAfN,SAAS,YAAY;AAErB,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAGxC,MAAM,uBAAuB,CAAC,UAA6B;AACzD,QAAM,EAAE,QAAQ,SAAS,WAAW,IAAI;AAExC,SAAO,WAAW;AAAA;AAAA,IAEf;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,OAAO,QAAQ,QAAQ,wBAAwB;AAAA,QACxD,eAAY;AAAA,QAEZ,8BAAC,wBAAsB,GAAG,OAAO;AAAA;AAAA,IACnC;AAAA,MAEA,oBAAC,SAAI,eAAY,0BACf,8BAAC,wBAAsB,GAAG,OAAO,GACnC;AAEJ;AAEA,qBAAqB,aAAa,IAAI;AAK/B,MAAM,eAAe,KAAK,oBAAoB;AAErD,aAAa,aAAa,IAAI;",
+  "sourcesContent": ["import { memo } from 'react';\n\nimport { ThresholdBarTemplate } from './ThresholdBarTemplate.js';\nimport { THRESHOLD_BAR_THICKNESS } from './types/constants.js';\nimport type { ThresholdBarProps } from './types.js';\n\nconst ThresholdBarInternal = (props: ThresholdBarProps) => {\n  const { length, layout = 'vertical' } = props;\n\n  return layout === 'horizontal' ? (\n    /* This is needed to adapt the container to the rotated threshold bar */\n    <div\n      style={{ width: length, height: THRESHOLD_BAR_THICKNESS }}\n      role=\"graphics-symbol\"\n      aria-label=\"threshold bar horizontal\"\n    >\n      <ThresholdBarTemplate {...props} />\n    </div>\n  ) : (\n    <div role=\"graphics-symbol\" aria-label=\"threshold bar vertical\">\n      <ThresholdBarTemplate {...props} />\n    </div>\n  );\n};\n\nThresholdBarInternal['displayName'] = 'ThresholdBarInternal';\n\n/**\n * @internal\n */\nexport const ThresholdBar = memo(ThresholdBarInternal);\n\nThresholdBar['displayName'] = 'ThresholdBar';\n"],
+  "mappings": "AAgBM;AAhBN,SAAS,YAAY;AAErB,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAGxC,MAAM,uBAAuB,CAAC,UAA6B;AACzD,QAAM,EAAE,QAAQ,SAAS,WAAW,IAAI;AAExC,SAAO,WAAW;AAAA;AAAA,IAEhB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,QAAQ,QAAQ,wBAAwB;AAAA,QACxD,MAAK;AAAA,QACL,cAAW;AAAA,QAEX,8BAAC,wBAAsB,GAAG,OAAO;AAAA;AAAA,IACnC;AAAA,MAEA,oBAAC,SAAI,MAAK,mBAAkB,cAAW,0BACrC,8BAAC,wBAAsB,GAAG,OAAO,GACnC;AAEJ;AAEA,qBAAqB,aAAa,IAAI;AAK/B,MAAM,eAAe,KAAK,oBAAoB;AAErD,aAAa,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/ThresholdBarTemplate.js

@@ -14,6 +14,7 @@ import {
 } from "./styles.sty.js";
 import { THRESHOLD_BAR_THICKNESS } from "./types/constants.js";
 import { getThresholdIntValue } from "./utils/get-threshold-int-value.js";
+import { resolveInfinitePixel } from "./utils/resolve-infinite-pixel.js";
 import { sortMarkers } from "./utils/sort-circle-markers.js";
 import { ChartTooltip } from "../tooltip/ChartTooltip/ChartTooltip.js";
 import { TooltipItem } from "../tooltip/section-components/TooltipItem/TooltipItem.js";
@@ -50,14 +51,16 @@ const ThresholdBarTemplate = (props) => {
         /* @__PURE__ */ jsx("svg", { width: THRESHOLD_BAR_THICKNESS, height: length, children: sortedMarkers.map((marker, index) => {
           const { y0, y1, color, isShadow = false } = marker;
           const isMarkerARange = y0 !== y1;
+          const resolvedY0 = resolveInfinitePixel(y0, length);
+          const resolvedY1 = resolveInfinitePixel(y1, length);
           if (isMarkerARange) {
             return [
               /* @__PURE__ */ jsx(
                 PillMarker,
                 {
                   x: 4,
-                  y0,
-                  y1,
+                  y0: resolvedY0,
+                  y1: resolvedY1,
                   color,
                   opacity: isShadow ? MARKER_SHADOW_OPACITY : MARKER_OPACITY,
                   onMouseMove: (event) => handleMouseMove(event, index),
@@ -72,7 +75,7 @@ const ThresholdBarTemplate = (props) => {
                 CircleMarker,
                 {
                   x: 8,
-                  y: y0,
+                  y: resolvedY0,
                   color,
                   onMouseMove: (event) => handleMouseMove(event, index),
                   onMouseLeave: handleMouseLeave

package/esm/charts/core/components/threshold-bar/ThresholdBarTemplate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/ThresholdBarTemplate.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ShapeIcon } from '../shape/ShapeIcon.js';\nimport { useThresholdBarTooltip } from './hooks/useThresholdBarTooltip.js';\nimport { CircleMarker } from './markers/CircleMarker.js';\nimport { MARKER_OPACITY, MARKER_SHADOW_OPACITY } from './markers/constants.js';\nimport { PillMarker } from './markers/PillMarker.js';\nimport {\n  bodyOverflowOverwrite,\n  nameValueContainer,\n  nameWithSpace,\n  valueChip,\n  wrapper,\n} from './styles.sty.js';\nimport { THRESHOLD_BAR_THICKNESS } from './types/constants.js';\nimport type { ThresholdBarProps } from './types.js';\nimport { getThresholdIntValue } from './utils/get-threshold-int-value.js';\nimport { sortMarkers } from './utils/sort-circle-markers.js';\nimport { ChartTooltip } from '../tooltip/ChartTooltip/ChartTooltip.js';\nimport { TooltipItem } from '../tooltip/section-components/TooltipItem/TooltipItem.js';\nimport { TooltipSymbolContent } from '../tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.js';\n\ntype LayoutType =\n  | 'vertical-flip'\n  | 'vertical-no-flip'\n  | 'horizontal-flip'\n  | 'horizontal-no-flip';\n\nexport const ThresholdBarTemplate = (props: ThresholdBarProps) => {\n  const {\n    borderArea,\n    length,\n    markers,\n    layout = 'vertical',\n    isFlipped = false,\n    onHover,\n  } = props;\n\n  const sortedMarkers = markers.toSorted(sortMarkers);\n  const intl = useIntl();\n\n  const {\n    showTooltip,\n    tooltipPosition,\n    tooltipItems,\n    handleMouseMove,\n    handleMouseLeave,\n  } = useThresholdBarTooltip(sortedMarkers, onHover);\n\n  const flipType = isFlipped ? 'flip' : 'no-flip';\n  const layoutType: LayoutType = `${layout}-${flipType}`;\n\n  return (\n    <div\n      className={wrapper({\n        borderArea,\n        layoutType,\n      })}\n      style={{ height: length }}\n    >\n      <svg width={THRESHOLD_BAR_THICKNESS} height={length}>\n        {sortedMarkers.map((marker, index) => {\n          const { y0, y1, color, isShadow = false } = marker;\n          const isMarkerARange = y0 !== y1;\n\n          if (isMarkerARange) {\n            return [\n              <PillMarker\n                x={4}\n                y0={y0}\n                y1={y1}\n                color={color}\n                opacity={isShadow ? MARKER_SHADOW_OPACITY : MARKER_OPACITY}\n                key={`threshold-bar-pill-marker-${marker.id}`}\n                onMouseMove={(event) => handleMouseMove(event, index)}\n                onMouseLeave={handleMouseLeave}\n              />,\n            ];\n          } else {\n            return [\n              <CircleMarker\n                x={8}\n                y={y0}\n                color={color}\n                key={`threshold-bar-circle-marker-${marker.id}`}\n                onMouseMove={(event) => handleMouseMove(event, index)}\n                onMouseLeave={handleMouseLeave}\n              />,\n            ];\n          }\n        })}\n      </svg>\n      {showTooltip && tooltipPosition && (\n        <ChartTooltip\n          position={tooltipPosition}\n          onMouseLeave={handleMouseLeave}\n          style={{ maxWidth: '300px', maxHeight: '100%' }}\n        >\n          <ChartTooltip.Body\n            className={bodyOverflowOverwrite}\n            virtualization={false}\n            style={{ maxHeight: '100%' }}\n          >\n            {tooltipItems.map(({ id, name, color, values }) => {\n              return (\n                <TooltipItem key={id}>\n                  <TooltipSymbolContent>\n                    <ShapeIcon shape=\"single\" color={color.Default} />\n                  </TooltipSymbolContent>\n                  <div className={nameValueContainer}>\n                    <span className={nameWithSpace}>{name.toString()}</span>\n                    <span className={valueChip}>\n                      {getThresholdIntValue(intl, values)}\n                    </span>\n                  </div>\n                </TooltipItem>\n              );\n            })}\n          </ChartTooltip.Body>\n        </ChartTooltip>\n      )}\n    </div>\n  );\n};\n\nThresholdBarTemplate['displayName'] = 'ThresholdBarTemplate';\n"],
-  "mappings": "AAmEc,cA0CI,YA1CJ;AAnEd,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,6BAA6B;AACtD,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAExC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAQ9B,MAAM,uBAAuB,CAAC,UAA6B;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,QAAQ,SAAS,WAAW;AAClD,QAAM,OAAO,QAAQ;AAErB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,eAAe,OAAO;AAEjD,QAAM,WAAW,YAAY,SAAS;AACtC,QAAM,aAAyB,GAAG,MAAM,IAAI,QAAQ;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,QAAQ;AAAA,QACjB;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD,OAAO,EAAE,QAAQ,OAAO;AAAA,MAExB;AAAA,4BAAC,SAAI,OAAO,yBAAyB,QAAQ,QAC1C,wBAAc,IAAI,CAAC,QAAQ,UAAU;AACpC,gBAAM,EAAE,IAAI,IAAI,OAAO,WAAW,MAAM,IAAI;AAC5C,gBAAM,iBAAiB,OAAO;AAE9B,cAAI,gBAAgB;AAClB,mBAAO;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG;AAAA,kBACH;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,SAAS,WAAW,wBAAwB;AAAA,kBAE5C,aAAa,CAAC,UAAU,gBAAgB,OAAO,KAAK;AAAA,kBACpD,cAAc;AAAA;AAAA,gBAFT,6BAA6B,OAAO,EAAE;AAAA,cAG7C;AAAA,YACF;AAAA,UACF,OAAO;AACL,mBAAO;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG;AAAA,kBACH,GAAG;AAAA,kBACH;AAAA,kBAEA,aAAa,CAAC,UAAU,gBAAgB,OAAO,KAAK;AAAA,kBACpD,cAAc;AAAA;AAAA,gBAFT,+BAA+B,OAAO,EAAE;AAAA,cAG/C;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC,GACH;AAAA,QACC,eAAe,mBACd;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,OAAO,EAAE,UAAU,SAAS,WAAW,OAAO;AAAA,YAE9C;AAAA,cAAC,aAAa;AAAA,cAAb;AAAA,gBACC,WAAW;AAAA,gBACX,gBAAgB;AAAA,gBAChB,OAAO,EAAE,WAAW,OAAO;AAAA,gBAE1B,uBAAa,IAAI,CAAC,EAAE,IAAI,MAAM,OAAO,OAAO,MAAM;AACjD,yBACE,qBAAC,eACC;AAAA,wCAAC,wBACC,8BAAC,aAAU,OAAM,UAAS,OAAO,MAAM,SAAS,GAClD;AAAA,oBACA,qBAAC,SAAI,WAAW,oBACd;AAAA,0CAAC,UAAK,WAAW,eAAgB,eAAK,SAAS,GAAE;AAAA,sBACjD,oBAAC,UAAK,WAAW,WACd,+BAAqB,MAAM,MAAM,GACpC;AAAA,uBACF;AAAA,uBATgB,EAUlB;AAAA,gBAEJ,CAAC;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ShapeIcon } from '../shape/ShapeIcon.js';\nimport { useThresholdBarTooltip } from './hooks/useThresholdBarTooltip.js';\nimport { CircleMarker } from './markers/CircleMarker.js';\nimport { MARKER_OPACITY, MARKER_SHADOW_OPACITY } from './markers/constants.js';\nimport { PillMarker } from './markers/PillMarker.js';\nimport {\n  bodyOverflowOverwrite,\n  nameValueContainer,\n  nameWithSpace,\n  valueChip,\n  wrapper,\n} from './styles.sty.js';\nimport { THRESHOLD_BAR_THICKNESS } from './types/constants.js';\nimport type { ThresholdBarProps } from './types.js';\nimport { getThresholdIntValue } from './utils/get-threshold-int-value.js';\nimport { resolveInfinitePixel } from './utils/resolve-infinite-pixel.js';\nimport { sortMarkers } from './utils/sort-circle-markers.js';\nimport { ChartTooltip } from '../tooltip/ChartTooltip/ChartTooltip.js';\nimport { TooltipItem } from '../tooltip/section-components/TooltipItem/TooltipItem.js';\nimport { TooltipSymbolContent } from '../tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.js';\n\ntype LayoutType =\n  | 'vertical-flip'\n  | 'vertical-no-flip'\n  | 'horizontal-flip'\n  | 'horizontal-no-flip';\n\nexport const ThresholdBarTemplate = (props: ThresholdBarProps) => {\n  const {\n    borderArea,\n    length,\n    markers,\n    layout = 'vertical',\n    isFlipped = false,\n    onHover,\n  } = props;\n\n  const sortedMarkers = markers.toSorted(sortMarkers);\n  const intl = useIntl();\n\n  const {\n    showTooltip,\n    tooltipPosition,\n    tooltipItems,\n    handleMouseMove,\n    handleMouseLeave,\n  } = useThresholdBarTooltip(sortedMarkers, onHover);\n\n  const flipType = isFlipped ? 'flip' : 'no-flip';\n  const layoutType: LayoutType = `${layout}-${flipType}`;\n\n  return (\n    <div\n      className={wrapper({\n        borderArea,\n        layoutType,\n      })}\n      style={{ height: length }}\n    >\n      <svg width={THRESHOLD_BAR_THICKNESS} height={length}>\n        {sortedMarkers.map((marker, index) => {\n          const { y0, y1, color, isShadow = false } = marker;\n          const isMarkerARange = y0 !== y1;\n          const resolvedY0 = resolveInfinitePixel(y0, length);\n          const resolvedY1 = resolveInfinitePixel(y1, length);\n\n          if (isMarkerARange) {\n            return [\n              <PillMarker\n                x={4}\n                y0={resolvedY0}\n                y1={resolvedY1}\n                color={color}\n                opacity={isShadow ? MARKER_SHADOW_OPACITY : MARKER_OPACITY}\n                key={`threshold-bar-pill-marker-${marker.id}`}\n                onMouseMove={(event) => handleMouseMove(event, index)}\n                onMouseLeave={handleMouseLeave}\n              />,\n            ];\n          } else {\n            return [\n              <CircleMarker\n                x={8}\n                y={resolvedY0}\n                color={color}\n                key={`threshold-bar-circle-marker-${marker.id}`}\n                onMouseMove={(event) => handleMouseMove(event, index)}\n                onMouseLeave={handleMouseLeave}\n              />,\n            ];\n          }\n        })}\n      </svg>\n      {showTooltip && tooltipPosition && (\n        <ChartTooltip\n          position={tooltipPosition}\n          onMouseLeave={handleMouseLeave}\n          style={{ maxWidth: '300px', maxHeight: '100%' }}\n        >\n          <ChartTooltip.Body\n            className={bodyOverflowOverwrite}\n            virtualization={false}\n            style={{ maxHeight: '100%' }}\n          >\n            {tooltipItems.map(({ id, name, color, values }) => {\n              return (\n                <TooltipItem key={id}>\n                  <TooltipSymbolContent>\n                    <ShapeIcon shape=\"single\" color={color.Default} />\n                  </TooltipSymbolContent>\n                  <div className={nameValueContainer}>\n                    <span className={nameWithSpace}>{name.toString()}</span>\n                    <span className={valueChip}>\n                      {getThresholdIntValue(intl, values)}\n                    </span>\n                  </div>\n                </TooltipItem>\n              );\n            })}\n          </ChartTooltip.Body>\n        </ChartTooltip>\n      )}\n    </div>\n  );\n};\n\nThresholdBarTemplate['displayName'] = 'ThresholdBarTemplate';\n"],
+  "mappings": "AAsEc,cA0CI,YA1CJ;AAtEd,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,6BAA6B;AACtD,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAExC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAQ9B,MAAM,uBAAuB,CAAC,UAA6B;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,QAAQ,SAAS,WAAW;AAClD,QAAM,OAAO,QAAQ;AAErB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,eAAe,OAAO;AAEjD,QAAM,WAAW,YAAY,SAAS;AACtC,QAAM,aAAyB,GAAG,MAAM,IAAI,QAAQ;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,QAAQ;AAAA,QACjB;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD,OAAO,EAAE,QAAQ,OAAO;AAAA,MAExB;AAAA,4BAAC,SAAI,OAAO,yBAAyB,QAAQ,QAC1C,wBAAc,IAAI,CAAC,QAAQ,UAAU;AACpC,gBAAM,EAAE,IAAI,IAAI,OAAO,WAAW,MAAM,IAAI;AAC5C,gBAAM,iBAAiB,OAAO;AAC9B,gBAAM,aAAa,qBAAqB,IAAI,MAAM;AAClD,gBAAM,aAAa,qBAAqB,IAAI,MAAM;AAElD,cAAI,gBAAgB;AAClB,mBAAO;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG;AAAA,kBACH,IAAI;AAAA,kBACJ,IAAI;AAAA,kBACJ;AAAA,kBACA,SAAS,WAAW,wBAAwB;AAAA,kBAE5C,aAAa,CAAC,UAAU,gBAAgB,OAAO,KAAK;AAAA,kBACpD,cAAc;AAAA;AAAA,gBAFT,6BAA6B,OAAO,EAAE;AAAA,cAG7C;AAAA,YACF;AAAA,UACF,OAAO;AACL,mBAAO;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG;AAAA,kBACH,GAAG;AAAA,kBACH;AAAA,kBAEA,aAAa,CAAC,UAAU,gBAAgB,OAAO,KAAK;AAAA,kBACpD,cAAc;AAAA;AAAA,gBAFT,+BAA+B,OAAO,EAAE;AAAA,cAG/C;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC,GACH;AAAA,QACC,eAAe,mBACd;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,OAAO,EAAE,UAAU,SAAS,WAAW,OAAO;AAAA,YAE9C;AAAA,cAAC,aAAa;AAAA,cAAb;AAAA,gBACC,WAAW;AAAA,gBACX,gBAAgB;AAAA,gBAChB,OAAO,EAAE,WAAW,OAAO;AAAA,gBAE1B,uBAAa,IAAI,CAAC,EAAE,IAAI,MAAM,OAAO,OAAO,MAAM;AACjD,yBACE,qBAAC,eACC;AAAA,wCAAC,wBACC,8BAAC,aAAU,OAAM,UAAS,OAAO,MAAM,SAAS,GAClD;AAAA,oBACA,qBAAC,SAAI,WAAW,oBACd;AAAA,0CAAC,UAAK,WAAW,eAAgB,eAAK,SAAS,GAAE;AAAA,sBACjD,oBAAC,UAAK,WAAW,WACd,+BAAqB,MAAM,MAAM,GACpC;AAAA,uBACF;AAAA,uBATgB,EAUlB;AAAA,gBAEJ,CAAC;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/indicators/ThresholdIndicator.js

@@ -24,7 +24,8 @@ const ThresholdIndicator = (props) => {
       LinePath,
       {
         ...lineProps,
-        "data-testid": "threshold-indicator-line-0",
+        role: "graphics-symbol",
+        "aria-label": "threshold indicator line 0",
         x: (d) => d.x0,
         y: (d) => d.y0
       }
@@ -33,7 +34,8 @@ const ThresholdIndicator = (props) => {
       Area,
       {
         data,
-        "data-testid": "threshold-indicator-area",
+        role: "graphics-symbol",
+        "aria-label": "threshold indicator area",
         x0: (d) => d.x0,
         x1: (d) => d.x1,
         y0: (d) => d.y0,
@@ -47,7 +49,8 @@ const ThresholdIndicator = (props) => {
       LinePath,
       {
         ...lineProps,
-        "data-testid": "threshold-indicator-line-1",
+        role: "graphics-symbol",
+        "aria-label": "threshold indicator line 1",
         x: (d) => d.x1,
         y: (d) => d.y1
       }

package/esm/charts/core/components/threshold-bar/indicators/ThresholdIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/indicators/ThresholdIndicator.tsx"],
-  "sourcesContent": ["import { Area, LinePath } from '@visx/shape';\nimport { LinePathProps } from '@visx/shape/lib/shapes/LinePath';\nimport { AddSVGProps } from '@visx/shape/lib/types';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const lineProps: AddSVGProps<\n    LinePathProps<ThresholdIndicatorData>,\n    SVGPathElement\n  > = {\n    data,\n    stroke: color,\n    strokeWidth,\n    strokeDasharray,\n  };\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        data-testid=\"threshold-indicator-line-0\"\n        x={(d) => d.x0}\n        y={(d) => d.y0}\n      />\n      {!strokeOnly && (\n        <Area<ThresholdIndicatorData>\n          data={data}\n          data-testid=\"threshold-indicator-area\"\n          x0={(d) => d.x0}\n          x1={(d) => d.x1}\n          y0={(d) => d.y0}\n          y1={(d) => d.y1}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        data-testid=\"threshold-indicator-line-1\"\n        x={(d) => d.x1}\n        y={(d) => d.y1}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAgDI,mBACE,KADF;AAhDJ,SAAS,MAAM,gBAAgB;AAI/B,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAmBnC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,YAGF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Area, LinePath } from '@visx/shape';\nimport { LinePathProps } from '@visx/shape/lib/shapes/LinePath';\nimport { AddSVGProps } from '@visx/shape/lib/types';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const lineProps: AddSVGProps<\n    LinePathProps<ThresholdIndicatorData>,\n    SVGPathElement\n  > = {\n    data,\n    stroke: color,\n    strokeWidth,\n    strokeDasharray,\n  };\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 0\"\n        x={(d) => d.x0}\n        y={(d) => d.y0}\n      />\n      {!strokeOnly && (\n        <Area<ThresholdIndicatorData>\n          data={data}\n          role=\"graphics-symbol\"\n          aria-label=\"threshold indicator area\"\n          x0={(d) => d.x0}\n          x1={(d) => d.x1}\n          y0={(d) => d.y0}\n          y1={(d) => d.y1}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 1\"\n        x={(d) => d.x1}\n        y={(d) => d.y1}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AAgDI,mBACE,KADF;AAhDJ,SAAS,MAAM,gBAAgB;AAI/B,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAmBnC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,YAGF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js

@@ -21,7 +21,8 @@ const CircleMarker = (props) => {
     /* @__PURE__ */ jsx(
       "circle",
       {
-        "data-testid": "circle-marker",
+        role: "graphics-symbol",
+        "aria-label": "circle marker",
         ref: circleRef,
         opacity: MARKER_OPACITY,
         stroke: MARKER_STROKE_COLOR,

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/CircleMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        data-testid=\"circle-marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        role=\"graphics-symbol\"\n        aria-label=\"circle marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </Group>\n  );\n};\n"],
+  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js

@@ -20,7 +20,8 @@ const PillMarker = (props) => {
     /* @__PURE__ */ jsx(
       "rect",
       {
-        "data-testid": "pill-marker",
+        role: "graphics-symbol",
+        "aria-label": "pill marker",
         ref: rectRef,
         x,
         y: Math.abs(y1 - y0) > MARKER_RADIUS * 2 ? Math.min(y0, y1) : (y0 + y1) / 2 - MARKER_RADIUS,

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/PillMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        data-testid=\"pill-marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        role=\"graphics-symbol\"\n        aria-label=\"pill marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </Group>\n  );\n};\n"],
+  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/styles.css

@@ -1,43 +1,43 @@
-._18heesa0-3-1-3 {
+._18heesa0-3-2-0 {
   border-right: unset;
   transform-origin: top left;
   width: 16px;
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa1-3-1-3 {
+._18heesa1-3-2-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-1-3 {
+._18heesa2-3-2-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-1-3 {
+._18heesa3-3-2-0 {
   border-left: none;
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa4-3-1-3 {
+._18heesa4-3-2-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-1-3 {
+._18heesa5-3-2-0 {
   transform: none;
 }
-._18heesa6-3-1-3 {
+._18heesa6-3-2-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-1-3 {
+._18heesa7-3-2-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-1-3 {
+._18heesa8-3-2-0 {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
-._18heesa9-3-1-3 {
+._18heesa9-3-2-0 {
   flex: 1;
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._18heesaa-3-1-3 {
+._18heesaa-3-2-0 {
   min-width: 24px;
   display: flex;
   align-items: center;
@@ -51,6 +51,6 @@
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   word-break: break-word;
 }
-._18heesab-3-1-3 {
+._18heesab-3-2-0 {
   overflow: hidden;
 }

package/esm/charts/core/components/threshold-bar/styles.sty.js

@@ -1,10 +1,10 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bodyOverflowOverwrite = "_18heesab-3-1-3";
-var nameValueContainer = "_18heesa8-3-1-3";
-var nameWithSpace = "_18heesa9-3-1-3";
-var valueChip = "_18heesaa-3-1-3";
-var wrapper = _7a468({ defaultClassName: "_18heesa0-3-1-3", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-1-3", leftBorder: "_18heesa2-3-1-3", rightBorder: "_18heesa3-3-1-3" }, layoutType: { "vertical-flip": "_18heesa4-3-1-3", "vertical-no-flip": "_18heesa5-3-1-3", "horizontal-flip": "_18heesa6-3-1-3", "horizontal-no-flip": "_18heesa7-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesab-3-2-0";
+var nameValueContainer = "_18heesa8-3-2-0";
+var nameWithSpace = "_18heesa9-3-2-0";
+var valueChip = "_18heesaa-3-2-0";
+var wrapper = _7a468({ defaultClassName: "_18heesa0-3-2-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-2-0", leftBorder: "_18heesa2-3-2-0", rightBorder: "_18heesa3-3-2-0" }, layoutType: { "vertical-flip": "_18heesa4-3-2-0", "vertical-no-flip": "_18heesa5-3-2-0", "horizontal-flip": "_18heesa6-3-2-0", "horizontal-no-flip": "_18heesa7-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bodyOverflowOverwrite,
   nameValueContainer,

package/esm/charts/core/components/threshold-bar/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesab-3-1-3';\nexport var nameValueContainer = '_18heesa8-3-1-3';\nexport var nameWithSpace = '_18heesa9-3-1-3';\nexport var valueChip = '_18heesaa-3-1-3';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-1-3',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-1-3',leftBorder:'_18heesa2-3-1-3',rightBorder:'_18heesa3-3-1-3'},layoutType:{'vertical-flip':'_18heesa4-3-1-3','vertical-no-flip':'_18heesa5-3-1-3','horizontal-flip':'_18heesa6-3-1-3','horizontal-no-flip':'_18heesa7-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesab-3-2-0';\nexport var nameValueContainer = '_18heesa8-3-2-0';\nexport var nameWithSpace = '_18heesa9-3-2-0';\nexport var valueChip = '_18heesaa-3-2-0';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-2-0',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-2-0',leftBorder:'_18heesa2-3-2-0',rightBorder:'_18heesa3-3-2-0'},layoutType:{'vertical-flip':'_18heesa4-3-2-0','vertical-no-flip':'_18heesa5-3-2-0','horizontal-flip':'_18heesa6-3-2-0','horizontal-no-flip':'_18heesa7-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,qBAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,YAAY;AAChB,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,aAAY,mBAAkB,YAAW,mBAAkB,aAAY,kBAAiB,GAAE,YAAW,EAAC,iBAAgB,mBAAkB,oBAAmB,mBAAkB,mBAAkB,mBAAkB,sBAAqB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/utils/get-marker-pixel.js

@@ -0,0 +1,11 @@
+import { getThresholdPixel } from "./get-threshold-pixel.ts.js";
+function getMarkerPixel(value, scale, layout) {
+  if (!isFinite(value)) {
+    return layout === "vertical" ? -value : value;
+  }
+  return getThresholdPixel(value, scale, layout);
+}
+export {
+  getMarkerPixel
+};
+//# sourceMappingURL=get-marker-pixel.js.map

package/esm/charts/core/components/threshold-bar/utils/get-marker-pixel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/threshold-bar/utils/get-marker-pixel.ts"],
+  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic, ScaleSymLog } from 'd3-scale';\n\nimport { getThresholdPixel } from './get-threshold-pixel.ts.js';\n\n/**\n * Converts a domain value to its pixel position for a ThresholdBar marker.\n * Infinite values are preserved as-is so the ThresholdBar can sort and group markers correctly.\n * Finite values are converted to pixel coordinates using the provided scale and layout.\n * @param value - domain value (can be Infinity/-Infinity for unbounded thresholds)\n * @param scale - axis scale\n * @param layout - chart orientation\n * @returns pixel position, or Infinity/-Infinity for unbounded values\n */\nexport function getMarkerPixel(\n  value: number,\n  scale:\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>,\n  layout: 'vertical' | 'horizontal',\n): number {\n  if (!isFinite(value)) {\n    return layout === 'vertical' ? -value : value;\n  }\n\n  return getThresholdPixel(value, scale, layout);\n}\n"],
+  "mappings": "AAEA,SAAS,yBAAyB;AAW3B,SAAS,eACd,OACA,OAIA,QACQ;AACR,MAAI,CAAC,SAAS,KAAK,GAAG;AACpB,WAAO,WAAW,aAAa,CAAC,QAAQ;AAAA,EAC1C;AAEA,SAAO,kBAAkB,OAAO,OAAO,MAAM;AAC/C;",
+  "names": []
+}

package/esm/charts/core/components/threshold-bar/utils/group-overlapping-markers.js

@@ -10,7 +10,7 @@ function getPixelBoundary(threshold, type) {
 function groupOverlappingMarkers(markers) {
   const groups = [];
   const sortedByMin = [...markers].sort(
-    (markerA, markerB) => Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1)
+    (markerA, markerB) => Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1) || Math.max(markerA.y0, markerA.y1) - Math.max(markerB.y0, markerB.y1)
   );
   for (const current of sortedByMin) {
     const currentMin = getPixelBoundary(current, "min");

package/esm/charts/core/components/threshold-bar/utils/group-overlapping-markers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/utils/group-overlapping-markers.ts"],
-  "sourcesContent": ["import { isPointThreshold } from '../../../types/type-guards.js';\nimport { MARKER_RADIUS } from '../markers/constants.js';\nimport type { ThresholdMarker } from '../types.js';\n\nfunction getPixelBoundary(\n  threshold: ThresholdMarker,\n  type: 'min' | 'max',\n): number {\n  const { y0, y1 } = threshold;\n\n  if (isPointThreshold(y0, y1)) {\n    return type === 'min' ? y0 - MARKER_RADIUS : y0 + MARKER_RADIUS;\n  }\n\n  return type === 'min' ? Math.min(y0, y1) : Math.max(y0, y1);\n}\n\nexport function groupOverlappingMarkers(\n  markers: ThresholdMarker[],\n): ThresholdMarker[][] {\n  const groups: ThresholdMarker[][] = [];\n  const sortedByMin = [...markers].sort(\n    (markerA, markerB) =>\n      Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1),\n  );\n\n  for (const current of sortedByMin) {\n    const currentMin = getPixelBoundary(current, 'min');\n\n    const groupIndex = groups.findIndex((group) =>\n      group.some((value) => {\n        const valueMax = getPixelBoundary(value, 'max');\n\n        return currentMin < valueMax;\n      }),\n    );\n\n    if (groupIndex !== -1) {\n      groups[groupIndex].push(current);\n    } else {\n      groups.push([current]);\n    }\n  }\n\n  return groups;\n}\n"],
-  "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,iBACP,WACA,MACQ;AACR,QAAM,EAAE,IAAI,GAAG,IAAI;AAEnB,MAAI,iBAAiB,IAAI,EAAE,GAAG;AAC5B,WAAO,SAAS,QAAQ,KAAK,gBAAgB,KAAK;AAAA,EACpD;AAEA,SAAO,SAAS,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI,EAAE;AAC5D;AAEO,SAAS,wBACd,SACqB;AACrB,QAAM,SAA8B,CAAC;AACrC,QAAM,cAAc,CAAC,GAAG,OAAO,EAAE;AAAA,IAC/B,CAAC,SAAS,YACR,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE;AAAA,EACtE;AAEA,aAAW,WAAW,aAAa;AACjC,UAAM,aAAa,iBAAiB,SAAS,KAAK;AAElD,UAAM,aAAa,OAAO;AAAA,MAAU,CAAC,UACnC,MAAM,KAAK,CAAC,UAAU;AACpB,cAAM,WAAW,iBAAiB,OAAO,KAAK;AAE9C,eAAO,aAAa;AAAA,MACtB,CAAC;AAAA,IACH;AAEA,QAAI,eAAe,IAAI;AACrB,aAAO,UAAU,EAAE,KAAK,OAAO;AAAA,IACjC,OAAO;AACL,aAAO,KAAK,CAAC,OAAO,CAAC;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isPointThreshold } from '../../../types/type-guards.js';\nimport { MARKER_RADIUS } from '../markers/constants.js';\nimport type { ThresholdMarker } from '../types.js';\n\nfunction getPixelBoundary(\n  threshold: ThresholdMarker,\n  type: 'min' | 'max',\n): number {\n  const { y0, y1 } = threshold;\n\n  if (isPointThreshold(y0, y1)) {\n    return type === 'min' ? y0 - MARKER_RADIUS : y0 + MARKER_RADIUS;\n  }\n\n  return type === 'min' ? Math.min(y0, y1) : Math.max(y0, y1);\n}\n\nexport function groupOverlappingMarkers(\n  markers: ThresholdMarker[],\n): ThresholdMarker[][] {\n  const groups: ThresholdMarker[][] = [];\n  const sortedByMin = [...markers].sort(\n    (markerA, markerB) =>\n      Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1) ||\n      Math.max(markerA.y0, markerA.y1) - Math.max(markerB.y0, markerB.y1),\n  );\n\n  for (const current of sortedByMin) {\n    const currentMin = getPixelBoundary(current, 'min');\n\n    const groupIndex = groups.findIndex((group) =>\n      group.some((value) => {\n        const valueMax = getPixelBoundary(value, 'max');\n\n        return currentMin < valueMax;\n      }),\n    );\n\n    if (groupIndex !== -1) {\n      groups[groupIndex].push(current);\n    } else {\n      groups.push([current]);\n    }\n  }\n\n  return groups;\n}\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,iBACP,WACA,MACQ;AACR,QAAM,EAAE,IAAI,GAAG,IAAI;AAEnB,MAAI,iBAAiB,IAAI,EAAE,GAAG;AAC5B,WAAO,SAAS,QAAQ,KAAK,gBAAgB,KAAK;AAAA,EACpD;AAEA,SAAO,SAAS,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI,EAAE;AAC5D;AAEO,SAAS,wBACd,SACqB;AACrB,QAAM,SAA8B,CAAC;AACrC,QAAM,cAAc,CAAC,GAAG,OAAO,EAAE;AAAA,IAC/B,CAAC,SAAS,YACR,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE,KAClE,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,KAAK,IAAI,QAAQ,IAAI,QAAQ,EAAE;AAAA,EACtE;AAEA,aAAW,WAAW,aAAa;AACjC,UAAM,aAAa,iBAAiB,SAAS,KAAK;AAElD,UAAM,aAAa,OAAO;AAAA,MAAU,CAAC,UACnC,MAAM,KAAK,CAAC,UAAU;AACpB,cAAM,WAAW,iBAAiB,OAAO,KAAK;AAE9C,eAAO,aAAa;AAAA,MACtB,CAAC;AAAA,IACH;AAEA,QAAI,eAAe,IAAI;AACrB,aAAO,UAAU,EAAE,KAAK,OAAO;AAAA,IACjC,OAAO;AACL,aAAO,KAAK,CAAC,OAAO,CAAC;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/utils/resolve-infinite-pixel.js

@@ -0,0 +1,12 @@
+import { MARKER_RADIUS } from "../markers/constants.js";
+function resolveInfinitePixel(y, plotSize) {
+  if (isFinite(y)) {
+    return y;
+  }
+  const isPositive = y > 0;
+  return isPositive ? plotSize + MARKER_RADIUS : -MARKER_RADIUS;
+}
+export {
+  resolveInfinitePixel
+};
+//# sourceMappingURL=resolve-infinite-pixel.js.map

package/esm/charts/core/components/threshold-bar/utils/resolve-infinite-pixel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/threshold-bar/utils/resolve-infinite-pixel.ts"],
+  "sourcesContent": ["import { MARKER_RADIUS } from '../markers/constants.js';\n\n/**\n * Resolves Infinity/-Infinity pixel values to just beyond the chart boundary so\n * the pill's rounded cap is clipped by the SVG viewport, producing a flat edge.\n * Finite pixel values are returned unchanged.\n * @param y - pixel position (may be Infinity/-Infinity for unbounded thresholds)\n * @param plotSize - length of the plot area in pixels\n */\nexport function resolveInfinitePixel(y: number, plotSize: number): number {\n  if (isFinite(y)) {\n    return y;\n  }\n  const isPositive = y > 0;\n\n  return isPositive ? plotSize + MARKER_RADIUS : -MARKER_RADIUS;\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AASvB,SAAS,qBAAqB,GAAW,UAA0B;AACxE,MAAI,SAAS,CAAC,GAAG;AACf,WAAO;AAAA,EACT;AACA,QAAM,aAAa,IAAI;AAEvB,SAAO,aAAa,WAAW,gBAAgB,CAAC;AAClD;",
+  "names": []
+}

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.css

@@ -1,58 +1,58 @@
-._1x31hou0-3-1-3 {
+._1x31hou0-3-2-0 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   width: fit-content;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1x31hou1-3-1-3 {
+._1x31hou1-3-2-0 {
   visibility: visible;
 }
-._1x31hou2-3-1-3 {
+._1x31hou2-3-2-0 {
   visibility: hidden;
 }
-._1x31hou3-3-1-3 {
+._1x31hou3-3-2-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-1-3 {
+._1x31hou4-3-2-0 {
   background-color: transparent;
   cursor: grab;
 }
-._1x31hou5-3-1-3 {
+._1x31hou5-3-2-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-1-3 {
+._1x31hou6-3-2-0 {
   position: relative;
 }
-._1x31hou7-3-1-3 {
+._1x31hou7-3-2-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-1-3 * {
+body[data-scroll-locked] ._1x31hou8-3-2-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-1-3 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-2-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-1-3 {
+._1x31hou9-3-2-0 {
   pointer-events: none;
 }
-._1x31houa-3-1-3 {
+._1x31houa-3-2-0 {
   position: relative;
 }
-._1x31houb-3-1-3 {
+._1x31houb-3-2-0 {
   position: absolute;
 }
-._1x31houc-3-1-3 {
+._1x31houc-3-2-0 {
   width: calc(100% - var(--dt-spacings-size-16, 16px));
   height: calc(100% - var(--dt-spacings-size-16, 16px));
   top: var(--dt-spacings-size-8, 8px);
   left: var(--dt-spacings-size-8, 8px);
 }
-._1x31houd-3-1-3 {
+._1x31houd-3-2-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-1-3 {
+._1x31houe-3-2-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }