@dynatrace/strato-components 3.10.4 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,178 @@
 # components
 
+## 3.11.0
+
+### Dependency updates
+
+- `@dynatrace/strato-design-tokens` was updated to version `1.6.0`.
+
+### Deprecations
+
+#### CodeEditor
+
+- Deprecated `gutterConfiguration` prop. Use the `diagnostics` and `showLintGutter` props for per-line validation markers instead. (APPDEV-17071)
+
+#### DataTable
+
+- The per-threshold `showIndicator` option in the `meterbar` column config has been deprecated. Use `showThresholdIndicators` instead. Until it is removed, existing per-threshold `showIndicator` flags are collapsed into the column-level flag as a fallback when `showThresholdIndicators` isn't set. All `true` shows all indicators; all `false` hides them; mixed values log a warning. (APPDEV-17783)
+
+#### MeterBarChart
+
+- The `showIndicator` prop on `MeterBarChart.ThresholdIndicator` has been deprecated. Use the chart-level `showThresholdIndicators` prop instead. Until it is removed, existing per-threshold `showIndicator` flags are collapsed into the chart-level prop as a fallback when `showThresholdIndicators` is not set. All `true` shows all indicators; all `false` hides them; mixed values log a warning. (APPDEV-17783)
+
+### Updates
+
+#### General
+
+- Overlays such as `Tooltip`, `Menu` item tooltips, `Select` and `FilterField` suggestion lists, `FeatureHighlight`, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)
+
+#### Charts
+
+- GaugeChart now accepts a top-level `showThresholdIndicators` prop to toggle the visibility of all threshold indicators at once (defaults to `true`). The `showIndicator` prop on `GaugeChart.ThresholdIndicator` remains deprecated in favor of it. (APPDEV-18834)
+- The tooltip no longer briefly flashes at the viewport origin on first display. (APPDEV-19045)
+- Fixed a bug where the `GaugeChart` threshold interval bar disappeared when two `ThresholdIndicator` elements had the same or very close values. (APPDEV-19230)
+- Fixed chart tooltip symbol alignment when using `SeriesItem` description prop. The symbol is now always aligned to the top. (APPDEV-19225)
+- Fixed an issue where charts displayed incorrect colors after switching between light and dark themes. (APPDEV-18752)
+- Fixed the invalid `role="presentation"` and `aria-label` on the chart interactions overlay, which caused screen readers to announce misleading information. (APPDEV-18639)
+
+#### Editors
+
+- Aligned the inline-diagnostics hover tooltip styling with the `FilterField` diagnostic tooltip. Each severity now shows a leading icon (`error`, `warning`, `info`). (APPDEV-18787)
+
+#### Layouts
+
+- Fixed `PageLayout.Details` ignoring `maxWidth` in the overlay layout, so dragging the panel now stops at the configured `maxWidth`. The `maxWidth` is unset by default. In the split layout, the details panel is kept to roughly half the width by the content panel. In the overlay layout, the panel is bounded by the container. (APPDEV-18910)
+
+#### Typography
+
+- You can now set the `id` prop on `Blockquote`, `Code`, `Emphasis`, `ExternalLink`, `Highlight`, `List`, `Strikethrough`, and `Strong`.
+
+#### Accordion
+
+- `Accordion.Section` content with `keepMounted` is now automatically hidden from assistive technology when collapsed. (APPDEV-19165)
+
+#### CodeEditor
+
+- Fold gutter markers are no longer announced by screen readers during virtual cursor navigation. Folding remains operable via keyboard shortcuts. (APPDEV-18645)
+- Added `showLintGutter` prop to show per-line severity markers in a gutter column. (APPDEV-17071)
+
+#### DataTable
+
+- Added a `showThresholdIndicators` option to the `meterbar` column config to toggle all threshold indicators at once (visible by default). (APPDEV-17783)
+- Fixed columns incorrectly showing as "Hidden" in the column settings when opened while columns were still loading. (APPDEV-19382)
+- Column action trigger buttons no longer share an identical accessible name. Each button now includes the column name, so screen readers can distinguish between them. (APPDEV-18617)
+- The outer wrapper no longer causes an `aria-prohibited-attr` axe accessibility violation. (APPDEV-18944)
+- The "Download CSV" menu options are now programmatically associated with their labels, and the toolbar's download/actions menu trigger now exposes its expanded state to assistive technologies. (APPDEV-19172)
+- The built-in column headers for drag-and-drop row ordering, row selection, expandable rows, and row actions now have accessible names. (APPDEV-18631)
+- Improved rendering performance by ensuring only affected table components re-render after internal state changes. (APPDEV-18255)
+- A table with column ordering enabled no longer causes an `aria-required-children` accessibility violation when rendered with no data rows. (APPDEV-19287)
+- Screen readers now announce the number of matching columns when searching in the column settings modal. (APPDEV-19199)
+
+#### DateTimePicker
+
+- Fixed a race condition where rapid ArrowUp/ArrowDown presses caused the displayed value to flicker. (APPDEV-18555)
+- Fixed the calendar button from showing hover styles when `DateTimePicker` is disabled. (APPDEV-18548)
+- Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
+- You can now use `onFocus` and `onBlur` props on `DateTimePicker`; both fire at the whole-component boundary so opening and closing the calendar overlay does not produce spurious blur or focus events. (APPDEV-17911)
+
+#### DQLEditor
+
+- Autocomplete suggestion labels are now truncated with a middle ellipsis that adapts to the available space — longer type labels reduce the suggestion threshold so labels no longer wrap or overflow the panel. (APPDEV-17383)
+- Added token type display next to each suggestion in the autocomplete panel. (APPDEV-17383)
+- The autocomplete suggestion description no longer shows internal placeholder text for value suggestions. (APPDEV-19072)
+
+#### FilterBar
+
+- Fixed `FilterBar.ResetButton` not having a valid accessible name when the tooltip was closed because `aria-labelledby` referenced an element that was not yet in the DOM. (APPDEV-18942)
+
+#### FilterField
+
+- You can now use `onFocus` and `onBlur` props on `FilterField`; both fire at the whole-component boundary so moving focus between the editor, clear/pin buttons, and suggestions does not produce spurious blur or focus events. (APPDEV-17913)
+- Added utilities to convert the syntax tree into DQL. `convertFilterFieldTreeToDql` returns a ready-to-use `| filter … | search …` statement, and `enrichFilterFieldTreeWithDql` returns the tree with a `filterDql` fragment on every node, plus a `searchDql` term on every group. Both accept a `keyMap` for renaming keys and an `overrides` callback for full, per-statement control. The `escapeDqlIdentifier` / `escapeDqlStringLiteral` helpers are exposed for use inside overrides. (APPDEV-18385)
+- Empty values are not saved as recent filters. (APPDEV-19354)
+- Fixed the duplicate `*` that was appended outside the closing quote when selecting a "starts with" suggestion for a quoted value that already ends with `*`. (APPDEV-19227)
+- Fixed the grammar from treating `,`, `:`, `[`, and `
+- Fixed the cursor jumping to a wrong position while typing in a controlled `FilterField`. (APPDEV-19263)
+- Fixed the random spacing between suggestions that appeared when many suggestions were listed. (APPDEV-19236)
+
+#### HistogramChart
+
+- Simplified the `toolbar` so that it only shows one button when interactions are disabled. (APPDEV-18812)
+
+#### HoneycombChart
+
+- Updated the documentation to present the unified `ChartData` format as the primary API. It includes numerical and categorical `ChartData` examples, a new "Data accessors" section documenting `valueAccessor` (default `"value"`), and `colorPalette` replacing `colorScheme` across examples. Expanded the component TSDoc accordingly. Custom `ColoredRange` coloring remains documented via the deprecated `colorScheme` prop. (APPDEV-18735)
+
+#### InputGroup
+
+- Improved zIndex prioritization of bordering fields within the group. (APPDEV-17761)
+
+#### KeyboardShortcut
+
+- Fixed platform-specific key labels. (APPDEV-18437)
+
+#### Menu
+
+- `Menu.Item` and `Menu.Link` no longer cause a React console warning when `textValue` is passed. (APPDEV-18440)
+
+#### MeterBarChart
+
+- Replaced threshold marker lines with internal threshold interval bars rendered below the meter bar. (APPDEV-17783)
+- `MeterBarChart` now accepts `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). The inner SVG plot element is now `aria-hidden="true"` to prevent redundant announcements inside the chart's `role="img"` container. If you rely on CSS selectors targeting `svg[aria-label="Chart Plot Area"
+
+#### MultiMeterBarChart
+
+- `MultiMeterBarChart` now accepts `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). (APPDEV-19124)
+
+#### SearchInput
+
+- The built-in clear button now exposes an accessible name, so assistive technologies announce its purpose. (APPDEV-18637)
+
+#### SegmentSelector
+
+- Segment definitions are now refreshed in the background when the overlay is opened, ensuring variable query freshness after cross-tab changes. (APPDEV-16585)
+- Segment presets that contain unavailable segments now show a "Remove" button instead of the pin/unpin button, allowing you to clean up broken presets. (APPDEV-18342)
+- Now gives users better guidance in case of unavailable variables. (APPDEV-15882)
+
+#### Select
+
+- Fixed the native browser validation popup from appearing on required `Select` fields. (APPDEV-19286)
+- Added `onFocus` prop. It only fires when focus enters the component from outside, not on internal transitions. (APPDEV-17910)
+- Fixed the random spacing between options that appeared when many options were listed. (APPDEV-19236)
+
+#### Sheet
+
+- The `title` prop now accepts a `ReactElement` in addition to a `string`. (APPDEV-18664)
+
+#### TextInput
+
+- Fixed the `TextInput.Button` accessibility issue where `aria-labelledby` pointed to a non-existent element ID when the tooltip was not visible and silently overrode a consumer-supplied `aria-label`. (APPDEV-18942)
+
+#### TimeframeSelector
+
+- Fixed the boundary hint shown with a blank date value when an invalid date expression was passed as the `min` or `max` prop. (APPDEV-19284)
+- Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
+- Fixed `TimeframeSelector.PresetItem` setting `aria-describedby` to a non-existent element when the tooltip was closed. (APPDEV-18942)
+
+#### TimeseriesChart
+
+- Fixed the `curve` prop from not being applied to line and area series. (APPDEV-19197)
+- Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812)
+
+#### TopList
+
+- Added `actions` prop to `TopList`, allowing you to provide a context menu for each bar. The `TopListActionItem` type is exported for use with the callback. (APPDEV-19062)
+- Bars with zero or near-zero values can now be hovered. (APPDEV-18759)
+- Now supports `colorPaletteMode` prop. (APPDEV-18752)
+
+#### XYChart
+
+- Bars with zero or near-zero values can now be hovered. (APPDEV-18759)
+- Pressing `Escape` with a series action menu open now correctly clears the series highlight after dismissing the tooltip.
+- Fixed the legend size from getting stuck on a stale measurement when the chart is rendered inside a frequently re-rendering parent. (APPDEV-18842)
+- Fixed the `colorRule` `colorPalette` on `BarSeries` from resolving to the palette's first color for every matching bar instead of the color matching the series' own index. (APPDEV-19198)
+- Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812)
+
 ## 3.10.4
 
 ### Updates
@@ -164,6 +337,14 @@
 - Fixed the `min` and `max` axis props to default to `'auto'` when `undefined` is passed explicitly. (APPDEV-19012)
 - The shared tooltip now highlights the hovered series and scrolls it into view when the series list is longer than the visible area. (APPDEV-18366)
 
+## 3.9.1
+
+### Updates
+
+#### Select
+
+- Fixed the native browser validation popup appearing on required `Select` fields. (APPDEV-19286)
+
 ## 3.9.0
 
 ### Deprecations

package/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-10-4 {
+._10kgnsa0-3-11-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-10-4);
-  box-shadow: var(--_bx32h4-3-10-4);
-  color: var(--_bx32h0-3-10-4);
+  background: var(--_bx32h3-3-11-0);
+  box-shadow: var(--_bx32h4-3-11-0);
+  color: var(--_bx32h0-3-11-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-10-4 {
+._10kgnsa1-3-11-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-10-4 {
+._10kgnsa2-3-11-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-10-4 {
+._10kgnsa3-3-11-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-10-4 {
+._10kgnsa4-3-11-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-10-4 {
+._10kgnsa5-3-11-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-10-4 {
+._10kgnsa6-3-11-0 {
   width: 100%;
 }
-._10kgnsa7-3-10-4 {
+._10kgnsa7-3-11-0 {
   width: fit-content;
 }
-._10kgnsa8-3-10-4 {
+._10kgnsa8-3-11-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-10-4 ._10kgnsa9-3-10-4:not(:has(svg:only-child)) {
+._10kgnsa3-3-11-0 ._10kgnsa9-3-11-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-10-4 ._10kgnsa9-3-10-4:not(:has(svg:only-child)) {
+._10kgnsa4-3-11-0 ._10kgnsa9-3-11-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-10-4 {
+._10kgnsab-3-11-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.sty.js

@@ -28,7 +28,7 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-10-4", variantClassNames: { textAlign: { start: "_10kgnsa1-3-10-4", center: "_10kgnsa2-3-10-4" }, size: { condensed: "_10kgnsa3-3-10-4", "default": "_10kgnsa4-3-10-4" }, disabled: { true: "_10kgnsa5-3-10-4" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-10-4", variantClassNames: { textual: { true: "_oqqp1n0-3-10-4", false: "_10kgnsab-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-10-4";
-var widths = { full: "_10kgnsa6-3-10-4", content: "_10kgnsa7-3-10-4" };
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-11-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-11-0", center: "_10kgnsa2-3-11-0" }, size: { condensed: "_10kgnsa3-3-11-0", "default": "_10kgnsa4-3-11-0" }, disabled: { true: "_10kgnsa5-3-11-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-11-0", variantClassNames: { textual: { true: "_oqqp1n0-3-11-0", false: "_10kgnsab-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-11-0";
+var widths = { full: "_10kgnsa6-3-11-0", content: "_10kgnsa7-3-11-0" };

package/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-10-4 {
+._1xe9ern0-3-11-0 {
   opacity: 0.5;
 }

package/buttons/intent-button/IntentButton.sty.js

@@ -21,4 +21,4 @@ __export(IntentButton_css_exports, {
 });
 module.exports = __toCommonJS(IntentButton_css_exports);
 var import_IntentButton_css_ts_vanilla = require("./IntentButton.css");
-var disabledAppIconOpacity = "_1xe9ern0-3-10-4";
+var disabledAppIconOpacity = "_1xe9ern0-3-11-0";

package/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-10-4 {
+._1j9pkom0-3-11-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-10-4 {
+._1j9pkom1-3-11-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/buttons/notify-button/NotifyButton.sty.js

@@ -22,5 +22,5 @@ __export(NotifyButton_css_exports, {
 });
 module.exports = __toCommonJS(NotifyButton_css_exports);
 var import_NotifyButton_css_ts_vanilla = require("./NotifyButton.css");
-var overlay = "_1j9pkom0-3-10-4";
-var toast = "_1j9pkom1-3-10-4";
+var overlay = "_1j9pkom0-3-11-0";
+var toast = "_1j9pkom1-3-11-0";

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-10-4 {
+._1wi8enr0-3-11-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-10-4 {
+._1wi8enr1-3-11-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -23,5 +23,5 @@ __export(CategoricalBarChartInspectOverlay_css_exports, {
 module.exports = __toCommonJS(CategoricalBarChartInspectOverlay_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_CategoricalBarChartInspectOverlay_css_ts_vanilla = require("./CategoricalBarChartInspectOverlay.css");
-var crosshairLayout = "_1wi8enr0-3-10-4 _13lzg4k0-3-10-4";
-var dataPointLayout = "_1wi8enr1-3-10-4 _13lzg4k0-3-10-4";
+var crosshairLayout = "_1wi8enr0-3-11-0 _13lzg4k0-3-11-0";
+var dataPointLayout = "_1wi8enr1-3-11-0 _13lzg4k0-3-11-0";

package/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-10-4 {
+._145zb630-3-11-0 {
   position: relative;
 }

package/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsAtom_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsAtom_css_exports);
 var import_AnnotationsAtom_css_ts_vanilla = require("./AnnotationsAtom.css");
-var wrapper = "_145zb630-3-10-4";
+var wrapper = "_145zb630-3-11-0";

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

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

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsCanvasLayout_css_exports);
 var import_AnnotationsCanvasLayout_css_ts_vanilla = require("./AnnotationsCanvasLayout.css");
-var canvasContainer = "_1yc349j0-3-10-4";
+var canvasContainer = "_1yc349j0-3-11-0";

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

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

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsOverlays_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsOverlays_css_exports);
 var import_AnnotationsOverlays_css_ts_vanilla = require("./AnnotationsOverlays.css");
-var annotationsOverlay = "_107efci0-3-10-4";
+var annotationsOverlay = "_107efci0-3-11-0";

package/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-10-4 {
+._uzgvu30-3-11-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsScrollWrapper_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsScrollWrapper_css_exports);
 var import_AnnotationsScrollWrapper_css_ts_vanilla = require("./AnnotationsScrollWrapper.css");
-var scrollWrapper = "_uzgvu30-3-10-4";
+var scrollWrapper = "_uzgvu30-3-11-0";

package/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.js

@@ -45,7 +45,6 @@ const buildExternalConfig = (truncationMode) => ({
   seriesHeader: null,
   displayHeaderDivider: false,
   symbolPosition: "left",
-  symbolVerticalAlignment: "start",
   truncationMode,
   defaultActionsConfig: BASE_ACTIONS_CONFIG,
   variant: "single"

package/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-10-4 {
+._90oaxp0-3-11-0 {
   display: block;
   overflow: visible;
 }

package/charts/core/components/axes/Axis.sty.js

@@ -21,4 +21,4 @@ __export(Axis_css_exports, {
 });
 module.exports = __toCommonJS(Axis_css_exports);
 var import_Axis_css_ts_vanilla = require("./Axis.css");
-var axis = "_90oaxp0-3-10-4";
+var axis = "_90oaxp0-3-11-0";

package/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-10-4 {
+@keyframes _3rbllj2-3-11-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-10-4 {
+@keyframes _3rbllj3-3-11-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-10-4 {
+._3rbllj4-3-11-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-10-4 {
+._3rbllj5-3-11-0 {
   left: 0;
-  animation-name: _3rbllj2-3-10-4;
+  animation-name: _3rbllj2-3-11-0;
 }
-._3rbllj6-3-10-4 {
+._3rbllj6-3-11-0 {
   right: 0;
-  animation-name: _3rbllj3-3-10-4;
+  animation-name: _3rbllj3-3-11-0;
 }
-._3rbllj7-3-10-4 {
+._3rbllj7-3-11-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-10-4:hover {
+._3rbllj7-3-11-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-10-4:active {
+._3rbllj7-3-11-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-10-4 ~ div {
-  --_3rbllj0-3-10-4: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-11-0 ~ div {
+  --_3rbllj0-3-11-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-10-4 ~ div {
-  --_3rbllj1-3-10-4: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-11-0 ~ div {
+  --_3rbllj1-3-11-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-10-4 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-10-4, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-10-4, rgba(0,0,0,1) 0%));
+._3rbllj4-3-11-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-11-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-11-0, rgba(0,0,0,1) 0%));
 }

package/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -23,5 +23,5 @@ __export(PanningControls_css_exports, {
 module.exports = __toCommonJS(PanningControls_css_exports);
 var import_PanningControls_css_ts_vanilla = require("./PanningControls.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var panningArrow = "_3rbllj7-3-10-4";
-var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-10-4", variantClassNames: { direction: { toLeft: "_3rbllj5-3-10-4", toRight: "_3rbllj6-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-11-0";
+var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-11-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-0", toRight: "_3rbllj6-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/canvas/utils/canvas-color.js

@@ -35,5 +35,8 @@ const getCanvasColor = (0, import_lodash_es.memoize)(
       return (0, import_getTokenComputedStyle.getTokenComputedStyle)(fallbackColor);
     }
     return transformedColor;
-  }
+  },
+  // Include the active theme in the cache key so a light→dark (or dark→light)
+  // switch doesn't return a stale resolved color from the previous theme.
+  (color, fallbackColor = import_constants.SCALE_FALLBACK_COLOR) => `${document.documentElement.getAttribute("data-theme") ?? ""}::${color}::${fallbackColor}`
 );

package/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-10-4 {
+._13lzg4k0-3-11-0 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-10-4 {
+._13lzg4k1-3-11-0 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-10-4 {
+._13lzg4k2-3-11-0 {
   position: relative;
 }

package/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -23,6 +23,6 @@ __export(ChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(ChartGrid_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("./ChartGrid.css");
-var area = "_13lzg4k1-3-10-4";
-var plot = "_13lzg4k2-3-10-4";
-var plotLayout = "_13lzg4k0-3-10-4";
+var area = "_13lzg4k1-3-11-0";
+var plot = "_13lzg4k2-3-11-0";
+var plotLayout = "_13lzg4k0-3-11-0";

package/charts/core/components/chart-layout/ChartLayout.js

@@ -56,6 +56,9 @@ const ChartLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
     "data-testid": dataTestId = "chart-layout",
     "data-dt-component": dataDtComponent,
     "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails,
     role
   } = props;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
@@ -143,6 +146,9 @@ const ChartLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
               gridTemplateAreas: templateAreas,
               gap: 0,
               "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-details": ariaDetails,
               role,
               style: {
                 position: "relative",