@nxgt/material 3.39.0 → 3.42.0

package/dist/{use-heading-spy-uyhOQV2O.js → use-heading-spy-wElRpO2G.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-Bc7bdIRW.js";
+import { r as e } from "./i18n-provider-DkeMr5bw.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js

package/dist/{use-material-translation-kISeB-fY.js → use-material-translation-CFF73jk5.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-Bc7bdIRW.js";
-import { t } from "./translate-material-CRF13PON.js";
+import { r as e } from "./i18n-provider-DkeMr5bw.js";
+import { t } from "./translate-material-BYRDtSEk.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/README.md

@@ -9,7 +9,7 @@ detail: every option, the second example, and the traps.
 | [Components](components/README.md) | You are looking for a component — one preview per category, then one page per category |
 | [Forms](guides/forms.md) | You are building a form: the field / `*FormField` pair, React Hook Form + Zod, what each field emits, server errors, multi-step forms |
 | [Themes for your app](guides/themes.md) | You define your own themes: `defineTheme` modules, the Vite plugin's `themes` option, the `nxgt-theme` command and its CI check, the tone warnings |
-| [Charts](guides/charts.md) | You draw charts with `@nxgt/material/charts`: each chart, the shared props, zoom and phone scroll, the keyboard, accessibility, theming the `--chart-1..5` tokens, and moving off the Nivo charts, removed in 3.0 |
+| [Charts](guides/charts.md) | You draw charts with `@nxgt/material/charts`: each chart, the shared props, reference bands, thresholds and point tones, zoom and phone scroll, the keyboard, accessibility, theming the `--chart-1..5` tokens, and moving off the Nivo charts, removed in 3.0 |
 | [Cards and tiles](guides/cards-and-tiles.md) | You want a `DataTable` as a list of cards or tiles: `layout`, `renderCard`, `renderTile`, the card's one link, selection, the sort control, columns by the list's width |
 | [DataGrid](guides/data-grid.md) | You are building an editable grid: columns and editors, save modes and conflicts, resizing, hiding and reordering columns, paste, fill and series, undo, totals, long lists, phones, custom editors, CSP |
 | [Code editor](guides/code-editor.md) | You want `CodeEditor` or `CodeDiff` in a theme preset or your own (`defineCodeTheme`), several themes on one page, Monaco bundled instead of the CDN, or the new `@nxgt/material/code-editor` import (the reader look, the view props, the `ref` handle and the file tabs are in the component's own page) |

package/docs/components/data-table-filter-and-lists.md

@@ -861,12 +861,12 @@ export default function Students() {
   ```
 - **Bulk actions that count and run only their rows.** `bulkActions` also
   takes a list of `ServerTableBulkAction<T>` (`{ id, label, icon?, appliesTo?,
-  onClick, variant?, color?, loading? }`). Each button reads "Label (n)", n
+  name?, max?, maxNotice?, onClick, variant?, color?, loading? }`). Each button reads "Label (n)", n
   being the selected rows the action applies to, and is named "Label n rows"
   (`material.server-table.bulk-action` and `bulk-action-name`, English and
   French); `variant` (default `'tonal'`) and `color` (`'destructive'` for a
   destructive one) style the button, `loading` makes it busy; the type is
-  exported as `ServerTableBulkAction`. It is not rendered when n is 0, so 5 rows selected with none
+  exported as `ServerTableBulkAction`, with `ServerTableBulkContext`. It is not rendered when n is 0, so 5 rows selected with none
   archived show no "Restore". `onClick(ids, selection, rows)` receives only
   those ids and rows. An action without `appliesTo` applies to the whole
   selection: it shows the selection's size and gets every id. **Across
@@ -880,6 +880,61 @@ export default function Students() {
   (an action without it still gets every selected id). A row's snapshot is
   dropped when it is deselected, when the selection is cleared and when the
   query changes.
+
+  **Name, maximum and focus (`name`, `max`, `maxNotice`, `onClick`'s fourth
+  argument).** All three are optional and additive:
+  - `name: (count) => string` is the button's accessible name and tooltip,
+    e.g. `(n) => `Archive ${n} people``, instead of the generic "Archive 2
+    rows". Start it with the visible `label`: the button reads "Archive (2)",
+    and a name that begins with it lets speech input ("click Archive") and
+    screen readers agree (WCAG 2.5.3, Label in Name). It applies to the
+    toolbar, the phone's bar and the More menu's items alike.
+  - `max: 100` is the most rows one call takes, counted on the rows the action
+    applies to. Above it the button is replaced by `maxNotice`: a short muted
+    text, by default "Select 100 rows or fewer to archive"
+    (`material.server-table.bulk-max-notice`, English and French), or your own
+    node or `(count, max) => node`. The notice is told politely once, when the
+    action goes past `max`; moving from 101 to 102 rows says nothing more.
+    Under `max` again, the button returns. On a phone an action in the bar
+    shows the notice inline; one in the More menu is a disabled item whose
+    notice is its description (`aria-describedby`), so it reads under its label.
+  - `onClick(ids, selection, rows, { trigger, focusTrigger })`: `trigger` is the
+    button the action started from (the "More" button for a More-menu item),
+    and `focusTrigger()` gives it the focus back, found again at call time, so
+    it works after a re-render. When the action is gone by then (its count fell
+    to 0, or past `max`) the focus goes to the next bulk action, else "More",
+    else the table's "Select all" (the table itself without one), never the
+    body. A handler that takes three parameters stays valid.
+  ```tsx
+  const [confirm, setConfirm] = useState<{ ids: string[]; focus: () => void } | null>(null);
+  <ServerTable<Person>
+    {...props}
+    bulkActions={[
+      {
+        id: 'archive',
+        label: 'Archive',
+        appliesTo: (person) => !person.archived,
+        name: (n) => `Archive ${n} ${n === 1 ? 'person' : 'people'}`,
+        max: 100,
+        onClick: (ids, _selection, _rows, { focusTrigger }) =>
+          setConfirm({ ids, focus: focusTrigger }),
+      },
+    ]}
+  />
+  <Dialog open={confirm != null} onOpenChange={(open) => !open && setConfirm(null)}>
+    <DialogContent
+      // Without this, the focus goes back to what Radix remembers, which is
+      // gone when the action was in the More menu or has disappeared.
+      onCloseAutoFocus={(event) => {
+        event.preventDefault();
+        confirm?.focus();
+      }}
+    >
+      {/* … */}
+    </DialogContent>
+  </Dialog>
+  ```
+
   ```tsx
   <ServerTable<Item>
     {...props}
@@ -932,7 +987,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `error` | `ServerTableError \| null` | — | the fetch failed: the failure and a Retry replace the rows |
 | `onRetry` | `() => unknown` | — | the error's Retry; a returned promise keeps it loading |
 | `onClearFilters` | `() => void` | focus the table | without `filter`, after "clear" |
-| `bulkActions` | `(ids, selection: ServerTableSelection) => ReactNode \| ServerTableBulkAction<T>[]` | — | the selection's toolbar: your own buttons, or a list of actions with `appliesTo` that each count and run only the rows they apply to |
+| `bulkActions` | `(ids, selection: ServerTableSelection) => ReactNode \| ServerTableBulkAction<T>[]` | — | the selection's toolbar: your own buttons, or a list of actions (`appliesTo`, `name`, `max`, `maxNotice`; `onClick` also gets a `ServerTableBulkContext`) that each count and run only the rows they apply to |
 | `enableRowSelection`, `rowSelectionDisabledReason` | `boolean \| (row) => boolean`, `(row) => string \| undefined` | all rows, no reason | with `bulkActions`: which rows can be selected, and why one cannot ([DataTable](#datatable)) |
 | `pageHref` | `(params) => string` | `` `?${params}` `` | Previous / Next hrefs |
 | `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's params |
@@ -965,7 +1020,7 @@ rows (the bulk bar is not drawn under it). With the declarative list form of
 line rather than scroll, and past the third action the rest go into a "More"
 menu (`material.server-table.bulk-more`), each item keeping its count. From
 768px the buttons read "Label (n)" as before. When the focused button
-disappears the focus goes to the next one, else to "Select all". The function
+disappears the focus goes to the next one, else to "More", else to "Select all"; an action past `max` shows its notice there (an inline text, or a disabled More item). The function
 form (`bulkActions={(ids) => node}`) is drawn whole in the row, so keep it to
 one or two compact buttons; the footer's polite status still tells the selection once. The cards'
 own list bar row is gone in this layout; the names, the sort menu and the

package/docs/components/rich-widgets.md

@@ -278,6 +278,12 @@ import { LineChart } from '@nxgt/material/charts';
 />;
 ```
 
+A line chart can be read against a reference: `bands` shade a range of the
+value axis (a normal range), `thresholds` draw labelled lines and `pointTone`
+rings the values that need a word, which the tooltip, the summary and the
+"View data" table repeat
+([guide](../guides/charts.md#reading-values-against-a-reference)).
+
 Parts: `LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`,
 `RadialBarChart`, `FunnelChart`, `HeatmapChart`, `RadarChart`, `ScatterChart`,
 `ComboChart`.

package/docs/components/selection-and-choice.md

@@ -373,7 +373,7 @@ export function Framework() {
 
 ![Autocomplete](../previews/selection-choice-autocomplete.webp)
 
-Single or multiple (chips) autocomplete with free-solo values, accent-insensitive matching and a debounced server search.
+Single or multiple (chips) autocomplete with free-solo values, accent-insensitive matching and a debounced server search; a single value can be the input's own text (`display="text"`).
 
 ```tsx
 import { Autocomplete } from '@nxgt/material/components';
@@ -409,6 +409,8 @@ disabled with the field; Backspace in the empty input removes the last one.
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `mode` | `'single' \| 'multiple'` | — | required; decides the `value` type |
+| `display` | `'chip' \| 'text'` | `'chip'` | `mode="single"` only: how the value is drawn, a removable chip beside the input (and its placeholder), or the input's own text (type `AutocompleteDisplay`; see [One value as text](#one-value-as-text)). Ignored in `multiple` |
+| `clearable` | `boolean` | `true` | shows the "Clear" button; with `display="text"`, whether emptying the text and leaving the field clears the value |
 | `value` | `string` / `string[]` | — | required, per `mode` |
 | `onValueChange` | `(value?: string \| null) => void` / `(value?: string[] \| null) => void` | — | per `mode` |
 | `options` | `T[]` (`{ value, label, disabled? }` by default) | `[]` | the items (`disabled` on one: listed, announced as disabled, never picked); with `onSearch`, the list before a search and the selected options' labels |
@@ -435,6 +437,50 @@ An avatar in the rows and the chips:
 `getOptionLeading={(person) => <Avatar src={person.photo} alt="" />}`; see
 [the field look](../guides/field-look-2-x.md#autocomplete-and-the-chips-box).
 
+### One value as text
+
+By default a single value is drawn as a chip, like a multi-select with one
+entry. For picking one entry out of a long directory (a person, a place, a
+resource), `display="text"` makes the chosen option's label the input's own
+text, as a `Select` shows it, and keeps the search:
+
+```tsx
+<Autocomplete
+	mode="single"
+	display="text"
+	label="Member"
+	placeholder="Search a member"
+	options={selected ? [selected] : []}
+	onSearch={searchMembers}
+	value={value}
+	onValueChange={(next) => setValue(next ?? '')}
+/>
+```
+
+- The label fills the input (on the server too); the placeholder shows only
+  while the field is empty. The text is selected on focus, so typing replaces
+  it and searches again (`onSearch` or the local `filter`); the list opened on
+  the label is the whole `options`, not filtered by it.
+- Typing changes nothing until an option is picked. **Escape**, or leaving
+  the field (Tab, a click elsewhere), drops the typed text and brings the
+  label back; the value never moved. Escape on a closed list does the same
+  instead of clearing.
+- The "Clear" button empties the text and the value. Emptying the text by
+  hand and leaving the field clears the value too, since the field is
+  `clearable`. With `clearable={false}` there is no button, and an emptied text
+  gets the label back on leave: the value can only be replaced by another pick.
+- The option's `getOptionLeading` (or `renderSelectedLeading`) avatar shows
+  before the text while it is picked.
+- `freeSolo` still adds through its "Add" button; text left in the input and
+  not added is dropped on leave, as any other typed text.
+- Keep the selected option in `options` (as with `onSearch` and chips): a value
+  with no matching option has no label, so the input stays empty.
+- The input is the combobox: `aria-expanded` follows the list,
+  `aria-activedescendant` names the highlighted option, the picked option is
+  `aria-selected`, and the field's live region announces the suggestions as
+  before. `AutocompleteFormField` takes `display` and `clearable` too. Leaving the
+  window (Alt-Tab) is not leaving the field: the typed text waits.
+
 ### Searching a server
 
 `onSearch` takes the query and an `AbortSignal`; hand the signal to `fetch`

package/docs/guides/charts.md

@@ -63,7 +63,7 @@ export function SalesChart() {
   plot of the right height; the plot is drawn once the browser has measured its
   width, with its final geometry (the entry motion only runs after that).
   Nothing mismatches on hydration.
-- **Types:** `ChartRow`, `RowKey`, `ChartValue`, `ChartSeries`, `ChartAxis`, `ChartXAxis`,
+- **Types:** `ChartRow`, `RowKey`, `ChartValue`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartBand`, `ChartThreshold`,
   `ChartPoint`, `ChartBaseProps`, `ChartColor`, `ChartShape`, `ChartSlice`,
   `ScatterSeries`, `ScatterPoint`, `ComboSeries`, `ChartRange`,
   `ChartZoomOptions`, `ChartScrollOptions`, `ChartRangeProps`, `HeatColumn`,
@@ -203,6 +203,80 @@ The funnel is one series, so it takes no `legend`, `hidden` or `grid`; the round
 charts take no `grid`, and the heat map no `hidden`, `grid` or `patterns` (these
 are left out of their props types).
 
+## Reading values against a reference
+
+`LineChart` (and `AreaChart`, which takes the same props) can draw the range a
+value is read against, so it is not painted outside the chart where the
+tooltip, the summary and the table would miss it.
+
+```tsx
+'use client';
+import { LineChart } from '@nxgt/material/charts';
+import type { ChartBand, ChartPoint, ChartThreshold } from '@nxgt/material/charts';
+
+// Module-level (or memoized): the arrays and the function key the summary and the table.
+const bands: ChartBand[] = [
+  { from: 40, to: 60, label: 'Normal range', tone: 'success' },
+];
+const thresholds: ChartThreshold[] = [
+  { value: 70, label: 'Upper limit', tone: 'error' },
+  { value: 30, label: 'Lower limit', tone: 'info', dash: false },
+];
+const toneOf = (point: ChartPoint) =>
+  point.value > 70 ? 'error' : point.value > 60 ? 'warning' : point.value < 40 ? 'info' : undefined;
+
+<LineChart
+  title="Daily readings"
+  data={readings}
+  x="day"
+  series={[{ key: 'reading', label: 'Reading' }]}
+  points
+  bands={bands}
+  thresholds={thresholds}
+  pointTone={toneOf}
+  toneLabels={{ error: 'Critical', warning: 'High', info: 'Low' }}
+/>;
+```
+
+| Prop | Effect |
+| --- | --- |
+| `bands` | `{ from, to, label, tone? }[]`: a wash across the plot behind the lines, with its `label` inside it at the left. `from` and `to` may come in either order. |
+| `thresholds` | `{ value, label, tone?, dash? }[]`: a horizontal line behind the series with its `label` above it at the right end; dashed unless `dash: false`. |
+| `pointTone` | `(point: ChartPoint, series: ChartSeries) => Tone \| undefined`: the tone of one value. It is given the point `onPointClick` gets, so `point.index` is the row of the full `data` even when the chart is zoomed. |
+| `toneLabels` | `{ [tone]: word }`: the word of each tone, in your language and domain. Unset, the library's neutral word ("Error", translated by `material.charts.tone.*`); an app tone you declared falls back to its own name. |
+
+**The value axis holds them.** Unless `yAxis.min` and `yAxis.max` pin it, the
+axis grows to include every band end and threshold, so none is out of view.
+With a pinned axis a band is clipped to the plot and a threshold outside it is
+not drawn (it stays in the summary and the table). The scales are the chart's
+own, so a `zoom` window, a phone `scroll` and a resize keep them right.
+
+**The words are carried everywhere the picture is.**
+
+- The **tooltip** and the **live status** add the tone's word to a toned
+  value: `Day 4: Reading 63 (High)`.
+- The **summary** lists the ranges and lines (`Reference ranges: Normal range:
+  40 to 60. Thresholds: Upper limit: 70`), says how many values of each series
+  lie outside each band (`Reading: 5 of 12 points outside Normal range.`) and
+  counts the tones (`Reading: 2 High, 1 Critical, 2 Low, of 12 points.`). Over
+  a `zoom` window it counts the window's rows.
+- **View data** gets a column after each toned series (`Reading tone`) and a
+  list of the ranges and lines under the table.
+
+**Never colour alone.** A toned point is drawn as a ring in the tone's colour
+round the value (the series' own shape inside the ring with `patterns`), so it
+differs from an untoned dot by its form. A band is a decorative tint: the
+label, the summary and the table carry its meaning. Labels use the tone's text
+colour (4.5:1) on a card-coloured halo, lines and rings hold 3:1, and in
+forced colours the band is outlined and the lines, labels and rings use system
+colours. Nothing animates: reduced motion changes nothing here. Labels are
+cut to 45% of the plot's width, and a label in a right-to-left script is set
+right to left (the plot itself is never mirrored, see
+[Right-to-left pages](#right-to-left-pages)).
+
+A custom `tooltip` function receives the points as before; read the tone from
+your own `pointTone` if it should show the word.
+
 ## Shared props
 
 Every chart takes the shared props (`ChartBaseProps`):
@@ -398,7 +472,9 @@ keyboard behaviour.
   contrast alone, so the heat map is exempt from the 3:1 non-text rule for that
   step, and **View data** (the whole matrix as a table) is the accessible
   fallback; the number in a cell keeps 4.5:1 against its own fill.
-- **Never colour alone:** `patterns` adds shapes, dashes and fill patterns.
+- **Never colour alone:** `patterns` adds shapes, dashes and fill patterns; a
+  toned point is a ring and its word is in the tooltip, the summary and the
+  table ([Reading values against a reference](#reading-values-against-a-reference)).
 - **Reduced motion:** with `prefers-reduced-motion`, the final geometry shows at
   once with a short 120ms fade; there is no bounce, draw-in or morph, and the
   crosshair jumps.

package/docs/guides/i18n.md

@@ -404,7 +404,7 @@ fichier.") when it cannot show it, `material.file-preview.download`
 "Seuls les premiers {size} de ce fichier sont affichés.") under a text cut
 by the size cap; the text or Markdown it shows scrolls in a region named by
 `material.file-preview.content` ("Contents of {name}", "Contenu de {name}").
-A `ServerTable` bulk action with a list entry reads `material.server-table.bulk-action` ("{label} ({count})", the same in French) and is named by `material.server-table.bulk-action-name` ("{label} {count, plural, one {# row} other {# rows}}"; "{label} : {count, plural, one {# ligne} other {# lignes}}").
+A `ServerTable` bulk action with a list entry reads `material.server-table.bulk-action` ("{label} ({count})", the same in French) and is named by `material.server-table.bulk-action-name` ("{label} {count, plural, one {# row} other {# rows}}"; "{label} : {count, plural, one {# ligne} other {# lignes}}"). Past the action's `max` the notice that replaces its button reads `material.server-table.bulk-max-notice` ("Select {max, plural, one {# row} other {# rows}} or fewer to {label}"; "Sélectionnez {max, plural, one {# ligne} other {# lignes}} ou moins pour {label}"), unless the action gives its `maxNotice`; an action's `name` replaces `bulk-action-name`.
 `ServerTable`'s own live region (without `filter`) says
 `material.server-table.results` once a new query is answered ("{count,
 plural, =0 {No results} one {# result} other {# results}}"; "{count, plural,

package/docs/roadmap.md

@@ -482,6 +482,13 @@ version they shipped in, and planned entries may name the major they target.
   slider handles) and a phone scroll that opens on the latest point. The
   light `--chart-4` is now a purple. Client-only, like `/editor`.
   ([Charts](guides/charts.md))
+- **Reference bands, thresholds and point tones on the line chart** — `bands`
+  shade a range of the value axis, `thresholds` draw labelled lines, and
+  `pointTone` rings the values that need a word (`toneLabels` gives the words).
+  The words reach the tooltip, the live status, the summary (values outside a
+  band, tone counts) and a tone column of "View data"; the axis grows to hold
+  them and a zoom window keeps them right.
+  ([Reading values against a reference](guides/charts.md#reading-values-against-a-reference))
 
 - **The page's title in the app bar, a text breadcrumb root and the tenant in the menu** —
   a route's `handle.title` (a node, or a function of the match like

package/lib/components/components.css

@@ -150,6 +150,7 @@
 @import "./ui/widgets/native-charts/native-charts-round.css";
 @import "./ui/widgets/native-charts/native-charts-heat.css";
 @import "./ui/widgets/native-charts/native-charts-points.css";
+@import "./ui/widgets/native-charts/native-charts-reference.css";
 @import "./ui/widgets/native-charts/native-charts-zoom.css";
 /* The editor's documents: `.nxgt-prose`, shared with the viewer. */
 @import "./editor-prose.css";

package/lib/components/ui/widgets/native-charts/native-charts-reference.css

@@ -0,0 +1,102 @@
+/* A line chart's reference bands, threshold lines and toned points. Reached
+ * from components.css.
+ *
+ * A band is a wash across the plot, behind the lines: decorative, since its
+ * label (read aloud by the summary and listed under "View data") carries the
+ * meaning. A tone paints it with the tone itself at 12%; without one it is
+ * the foreground at 6%. Labels and threshold lines use the tone's text
+ * colour (4.5:1 on the card, both themes) or the foreground, and sit on a
+ * card-coloured halo so a line passing behind them does not cut the letters.
+ * A toned point is a ring round the value: a shape, never colour alone. */
+.nxgt-chart-ref-band {
+	fill: var(--foreground);
+	opacity: 0.06;
+}
+.nxgt-chart-ref-band[data-tone] {
+	fill: var(--nxgt-tone);
+	opacity: 0.12;
+}
+.nxgt-chart-ref-line {
+	stroke: var(--nxgt-chart-axis);
+	stroke-width: 1.5;
+	stroke-dasharray: 6 4;
+}
+.nxgt-chart-ref-line[data-dash="false"] {
+	stroke-dasharray: none;
+}
+.nxgt-chart-ref-line[data-tone] {
+	stroke: var(--nxgt-tone-text);
+}
+.nxgt-chart-ref-label {
+	fill: var(--foreground);
+	font-size: 11px;
+	font-weight: 600;
+	paint-order: stroke;
+	stroke: var(--card);
+	stroke-width: 3px;
+	stroke-linejoin: round;
+	pointer-events: none;
+}
+.nxgt-chart-ref-label[data-tone] {
+	fill: var(--nxgt-tone-text);
+}
+.nxgt-chart[data-phone] .nxgt-chart-ref-label {
+	font-size: 10px;
+}
+
+.nxgt-chart-tone-ring {
+	fill: var(--card);
+	stroke: var(--nxgt-tone-text);
+	stroke-width: 2;
+}
+.nxgt-chart-tone-dot {
+	fill: var(--nxgt-tone-text);
+}
+
+/* The tone's word in the tooltip, with the ring the plot draws. */
+.nxgt-chart-tip-tone {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--nxgt-tone-text);
+	font-size: 12px;
+	font-weight: 600;
+}
+
+/* Under "View data": the ranges and lines read as a list. */
+.nxgt-chart-table-notes {
+	margin: 8px 0 0;
+	padding: 0;
+	list-style: none;
+	color: var(--muted-foreground);
+	font-size: 12px;
+}
+
+@media (forced-colors: active) {
+	.nxgt-chart-ref-band {
+		fill: Canvas;
+		stroke: GrayText;
+		stroke-width: 1;
+		stroke-dasharray: 2 3;
+		opacity: 1;
+	}
+	.nxgt-chart-ref-line,
+	.nxgt-chart-ref-line[data-tone] {
+		stroke: CanvasText;
+	}
+	.nxgt-chart-ref-label,
+	.nxgt-chart-ref-label[data-tone] {
+		fill: CanvasText;
+		stroke: Canvas;
+	}
+	.nxgt-chart-tone-ring {
+		fill: Canvas;
+		stroke: Highlight;
+	}
+	.nxgt-chart-tone-dot {
+		fill: Highlight;
+	}
+	.nxgt-chart-tip-tone {
+		color: CanvasText;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.39.0",
+	"version": "3.42.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"