gridsmith-ui 0.30.1 → 0.31.0

package/CHANGELOG.md

@@ -1,6 +1,78 @@
 # gridsmith-ui changelog
 
-## Unreleased (0.30.1)
+## Unreleased (0.31.0)
+
+**Added.**
+- **A chart says what it shows, in a line above the drawing.** Every chart but Sparkline draws a sentence worked out from its data, so it stays true as the data changes: what it plots and over what; for each series (three at most, the rest counted), over dates or numbers its first and last values, "up" or "down" only when every step goes that way, and its highest and lowest when it goes both ways, and over names its highest and lowest; a pie's largest and smallest shares, a funnel's carry-through, a scatter chart's ranges, a Sankey chart's largest flow; any reference, and where a forecast runs. A screen reader hears it as the drawing's description once the chart is named (its `aria-label`, or its ChartContainer's title). `description` replaces it with the page's own words; a blank one keeps it. In a ChartContainer's fixed area it's shown with the table, so the drawing keeps its height.
+- **A chart's values as a table, one switch away.** Every chart but Sparkline has a Chart / Table switch, named after its chart ("Show Revenue as"), beside its ChartContainer's title when it's the container's one chart, else above the drawing. Table shows a table of every value the chart draws, in the drawing's place, named by the chart's name or its title, with its references and where its forecast runs listed under it. A table wider or taller than its room scrolls within it, a ChartContainer's fixed area included, as a Tab stop named after its chart ("Hours by month: values"), with the inset ring. Choosing a view never marks a form around the chart as changed. Numbers written as text ("150", as an API or a CSV gives them) are read as numbers, in the table and the sentence as in the drawing: a pie, a funnel, a radial chart, a treemap and a Sankey chart draw them too, where they drew nothing or the wrong part.
+- **Reference lines and bands.** LineChart, AreaChart, BarChart and CompositeChart take `references` (the `ChartReference` type, from `gridsmith-ui/charts`): a target or a limit as a dashed line at `value`, or a band from `value` to `to`, each drawn with its name, said in the sentence and listed under the table. Names in the plot never print over each other: one that would moves clear, within the plot. Each is drawn in a halo of the card's colour, so it reads over a bar or a line, and none leaves the plot: a line's name goes to the line's other side (a line at the value axis's foot), and a band's keeps inside the plot's edge (a band at the axis's start, narrower than its name). The value axis stretches to show each one; on CompositeChart they sit on the bars' axis, or the lines' in a chart of lines alone.
+- **A forecast, marked.** The same four charts take `forecastFrom`, the first category whose values are a forecast or a period not yet over, and `forecastLabel` ("Forecast" without one; the page's own words for a period under way, "So far this month"). From there a pale hatched band, named by the label, runs to the chart's end after a dashed line where it starts; lines and areas keep their colour and mark through it, and a bar draws fainter in a dashed outline of its own colour. The table marks each forecast row ("May (Forecast)"), and the sentence says where the forecast runs ("Forecast: May to Jun").
+- **ColorPicker's swatches alone.** `swatchesOnly` draws only the swatches, with no free colour area, hue or hex field, for a colour chosen from a set palette (a label's, a tag's or a project's colour), so the colours stay in harmony. The picker is then one radio group, named by its Field's label or by `aria-label`.
+- **Named swatches.** A swatch can be `{ value, label }` (the `ColorSwatch` type), named by its label to a screen reader and in its tooltip ("Sky"); a plain value is named by itself, as before. Two swatches of one colour are warned of in development.
+- **Timeline's name.** `aria-label` names its horizontal row for the Tab stop it becomes while it scrolls sideways ("Release history"; default "Timeline"); a vertical timeline doesn't scroll and takes none.
+- **SliderRange's and FileUpload's `aria-labelledby`.** Names the control by an element on the page, where no label on screen does.
+- **CodeBlock's name.** `aria-label` names its code for the Tab stop it becomes while it scrolls sideways ("app.tsx"; default its language, "Code: tsx").
+- **A table of things with sub-things.** Table takes `getChildRows`, asked of each row with its place (`{ level, parent }`) for its own rows of the same kind, in the same columns (tasks with their subtasks), and, given it, the Table is a tree table even before any row has rows under it: a treegrid whose rows are one Tab stop, moved with a tree's keys. Up and Down move between the rows shown, Right opens a row and then goes to its first row, Left closes it or goes to the row above it, Enter and Space do what a click on the row does, and Up from the first row reaches the header's controls. A row with rows under it draws a chevron before its name, a button named for what it does ("Show 2 rows under Launch site"); each level is indented, and the Details toggle is the row's last cell. `openParents`, `defaultOpenParents` and `onOpenParentsChange` hold which rows are open, by key, apart from a row's Details. `selectedKeys` and `onSelectedKeysChange` select by key, in any table: in a tree, selecting a row selects the rows under it, a row with only some of them chosen shows a mixed box, and a row whose rows are all chosen is reported too. A sort orders each level, the pager counts the top-level rows, an address in `expandedRows` that names a row under another opens the rows above it, and on a phone the rows under a card follow it, indented, behind its own Show button. Each row needs a `rowKey` value of its own across every level. A Table without `getChildRows` is as it was.
+
+**Fixed.**
+- **A chart's series differ by more than their colour** (WCAG 1.4.1). A chart told its series, or a pie's or a radial chart's parts, apart by colour alone. Each after the first now has its own mark, shown in the legend's and the tooltip's swatches too: a line's or an area's dash (RadarChart's too), a bar's, a slice's or a radial bar's pattern, a scatter series' symbol, and in CompositeChart its bars' patterns and its lines' dashes. Past the palette's six colours, each series still has a colour and a mark of its own. A pattern's marks take the card's colour or the text's, whichever reads against the fill, soft or solid, at 3:1 or more, on a see-through card as it shows over the page, and on a forecast's fainter bars too. A line the page dashes is never drawn solid, nor the same as another line. A chart of one series draws no mark; its legend's swatch is a short line or a square. FunnelChart names its stages on the drawing, and TreemapChart each tile with room for its name; the table names every one.
+- **SankeyChart names each point.** Its points were drawn in one colour, unnamed; each is now drawn in the palette's colours, with its name beside it, on the side toward the drawing's middle. A name longer than its room, between its column and the next, is cut short with "…", and fitted again as the drawing narrows or widens: the tooltip and the table give it whole.
+- **A SankeyChart whose flows loop no longer takes the page down.** A flow back to a point it came from ran Recharts' layout without end. A flow that would close a loop isn't drawn: the loop's smallest flow gives way, so the main direction is drawn whatever order the flows come in. A development warning names it, and the sentence and the table say it isn't drawn.
+- **A ColorPicker swatch gives its own colour.** A swatch gave back its value worked out again through hue, saturation and lightness: eight of the ten default swatches gave a hex a shade off their own, and so never showed as chosen, and a swatch written as an oklch colour or a token gave `#NaNNaNNaN`. A swatch now gives its value exactly as written.
+- **ColorPicker's swatches are a radio group.** Each was a button named by its hex, with nothing to say which was chosen. They're now one group ("Swatches"), the chosen swatch checked, with one Tab stop (the chosen swatch, else the first): the arrows move and choose, round the ends, and Home and End go to the first and last.
+- **ColorPicker in a Field is named by its label.** It was named by nothing, its hint and error not read with it, so an error summary's link had nowhere to go. It's now named by the Field's label and described by its hint and error, as RadioGroup is, and a required picker says so.
+- **A disabled ColorPicker changes nothing.** Its hue and opacity sliders and its hex field still took input; they're disabled with it.
+- **ColorPicker previews a value its free area can't show,** a theme's token or an oklch colour, as itself: it showed grey, or the colour chosen before.
+- **A Dropdown the page names reads what it shows too** (WCAG 2.5.3). Named by `aria-label`, its trigger was called by that name alone, so Tabs on a phone read "Contents" over a trigger showing "Security". It now reads the name, then what it shows: "Contents, Security", "Status, Open". This names Tabs and SettingsLayout on a phone, SettingsLayout's sidebar in a narrow box, TableToolbar's filter, a collapsed SegmentedControl and RecurrencePicker's unit. Pagination's page size reads "Rows per page, 10" as before. The open list keeps the name alone. A trigger that shows nothing reads the name alone, with no comma; one that shows its name, or starts with it, reads its own words.
+- **A label on screen leads every control's name** (WCAG 2.5.3). A page's `aria-label` or `aria-labelledby` replaced it: an Input in a Field labelled "Email" read the page's "Work email", SegmentedControl read "Calendar view" over its Field's "View", and a Dropdown's own label gave way to a hidden `aria-labelledby`. Every control a Field holds now follows one rule, Input, Textarea, NumberInput, TagInput, PinInput and Toggle among them: the label on screen, the control's own or its Field's (an AddAnother row's once it shows), leads, and a page's name beside it is left out, with a development warning naming the control. With none on screen, ARIA's order: the page's `aria-labelledby`, its `aria-label`, then a Field's hidden label. RecurrencePicker's page name names its group, and a read-only Rating in a Field reads its label and value ("Quality 3 out of 5"). A Dropdown trigger that shows its name as a word, or starts with it, reads its own words.
+- **A Field keeps a control's own `aria-describedby`,** beside its hint and error; it replaced it.
+- **A Toggle in a Field is named by the Field's label;** it read "Toggle".
+- **An overlay open from the start keeps focus in a development build.** Under StrictMode, a Dialog or Drawer drawn already open, with nothing focused, gave focus to the page behind it 200 ms on. Its way back is now dropped when it opens again, and after an unmount, focus inside it counts as lost only once it has gone or is hidden.
+- **One press on an infinite list's Load more loads one page.** A press by mouse or touch scrolled the button back into view after each load, which loaded again, until every page had loaded. Only a press by keyboard, while it holds the list, brings the button back into view, once the press's rows are in.
+- **Load more's last load finds what it brought, in a page's own markup.** Plain cards sent focus to the list's first card, and a pager in a layout box of its own sent it to that empty box. Focus now goes to the first new row, else the first control the load brought, else the last control before the pager, else the last resort. What came after the list's last item goes first, so a control the load enabled above the list doesn't take focus. A press hands focus on when its own load takes the button, however the page counts its pages; a load the list starts by itself ends the press's watch, so the list loading on as the person scrolls moves no focus.
+- **A group given focus for the moment gives its tabindex back.** When a removed control left no neighbour, its group kept `tabindex="-1"` after focus left. It now comes off, as a heading's does.
+- **An infinite list loads again after its last load by keyboard.** The button went with focus on it, which a browser doesn't report as a blur, so a filter that restarted the list never loaded as it scrolled.
+- **A scroll area looks again when what decides it changes.** Under the phone menu, a clock in `<main>` made it a Tab stop that stayed once the menu closed. Areas now wait while inert, and look again when a control inside is enabled, shown or given a tabindex, or a box round them is made inert or not.
+- **The shell's `<main>` asks less of a long page.** It found and sorted every control at each change and each focus move inside it; it now stops at the first one, and looks again only as focus leaves `<main>` itself.
+- **Scroll areas are named for what they hold.** A CodeBlock is named by its `aria-label`, else its language ("Code: tsx"); a markdown table by its first two headings and how many more ("Table: Name, Email and 8 more"); a horizontal Timeline by its `aria-label`.
+- **Pagination's page size reads the size in force.** A size its options lacked (a project's 20 against 10, 25 and 50) showed and read "Select..."; it now joins the options, at its place in their order.
+
+### Upgrade note for agents (0.30.2 → 0.31.0)
+
+Upgrade `gridsmith-ui` to `^0.31.0` (an app pinned to `^0.30.0` never reaches it), then report the new version as `ui_version`: the rules and guidance that need 0.31.0 are served from then on. An app's code needs no change and its theme's stylesheet no regenerating; what to check:
+- **A chart's look.** A chart of several series marks each series after the first by a dash, a pattern or a symbol, and its legend's swatches show them (a short line, a square or a symbol where it drew dots); a forecast is a hatched band; SankeyChart's points are coloured and named; every chart but Sparkline has its sentence and its Chart / Table switch. A screenshot or snapshot test of a chart changes.
+- **Words the page drew beside a chart to say what it shows.** The chart draws its own sentence now: pass the page's words as `description`, rather than drawing both. A table of the chart's values the page drew itself, or a caption naming its target or where its forecast starts, is drawn by the chart now too: take the page's own out, and give the chart `references` and `forecastFrom`.
+- **A forecast drawn as a series of its own, dashed.** Give the chart `forecastFrom` instead, and the forecast's values in the series itself. A line the page dashes (`LineDef.dashed`) may draw in another dash, one no other line has.
+- **The Tab order.** Each chart's switch is a Tab stop, one more for a test that counts Tab presses through a page of charts. ColorPicker's swatches are one Tab stop where each was one, and a disabled picker's sliders and hex field leave the Tab order.
+- **A test that finds a chart's switch** finds it by its name, "Show <the chart's name> as".
+- **A test that finds a ColorPicker swatch as a button.** Swatches are radios: `getByRole('radio', { name: '#3b82f6' })`, or by the swatch's label. A test that expected a swatch to give a converted hex gets the swatch's own value, and a press on the swatch already chosen no longer calls `onChange`. Each swatch shows its name in a tooltip, and the chosen swatch draws a check: a screenshot of the picker changes.
+- **A test that finds a Dropdown by the name the page gave it.** It reads that name, then what it shows: `getByRole('button', { name: 'Status, Open' })`, or `/^Status, /`. Tabs' phone Dropdown is "Contents, <the tab chosen>", not 0.30.2's "Contents". Pass the name alone: a page that wrote the choice into `aria-label` has it read twice.
+- **A test that finds a scroll area by its name.** A CodeBlock's is its `aria-label`, else "Code: <language>"; a markdown table's "Table: <its first two headings> and <n> more".
+- **Any control with a label on screen, a Field's or its own (Input and Toggle included), is named by it:** remove an `aria-label` or `aria-labelledby` given beside it (a development warning names the control). A test that found it by the page's name finds it by the label. Under a hidden Field label (`hideLabel`), the page's name now wins, as ARIA orders it. A RecurrencePicker's `aria-label` or `aria-labelledby` names its group (`getByRole('group', { name })`); its choice reads "Repeat", or its Field's label.
+- **A page size outside `pageSizeOptions`** appears among them.
+- **After Load more's last load in a list of your own,** focus is on the first new item's first control.
+
+## 0.30.2 — 16 October 2026
+
+**Added.**
+- **ScrollArea's name.** `aria-label` names the area for the Tab stop it becomes while it scrolls with nothing in it to Tab to ("Release notes"; default "Scrollable content").
+- **Tabs' name.** `aria-label` names the tab list, and on a phone the Dropdown the tabs collapse to ("Settings sections"). The Dropdown is called "Contents" without one, GOV.UK's title for the same list of sections. SettingsLayout passes its own name.
+
+**Fixed.**
+- **Load more's last load hands focus on.** The last load took the button with it, so focus fell to the page, by Load more or in an infinite list. Focus now goes to the first row that load brought: its first control, else the row itself, so the person reads on where they asked to. A load before the last still keeps focus on the button.
+- **ScrollArea, Timeline's row, CodeBlock and a markdown table are in the keyboard's reach.** Each scrolled with nothing in it to Tab to, so a keyboard couldn't scroll it in Safari, and axe flagged it. Each is now a named Tab stop while it scrolls and holds nothing to Tab to, drawn with the inset ring 0.30.1 gave the other scroll areas: ScrollArea by its name, Timeline's horizontal row "Timeline", a CodeBlock's code "Code" while it doesn't wrap, and a markdown table's frame "Table". MarkdownContent's and the chat's code blocks are CodeBlocks too.
+- **Tabs collapsed to a Dropdown on a phone has a name.** It had none, and nor did its list.
+- **An overlay opened from one that was open from the start gives focus back.** A page loaded with its preview open, whose "Edit details" swaps the preview for an edit drawer, left focus on the page when the drawer closed. The last resort now counts an overlay's own address closing back to its page as the same page, and ends at the page's `<main>`: its first control, else its heading, else `<main>` itself, where the skip link's jump goes. An overlay in a portal leaves no place of its own once it has gone.
+- **A focus rule's timer never throws after its page has gone.** A test's page torn down within the last resort's 200 ms wait raised "document is not defined" in the test run.
+
+### Upgrade note for agents (0.30.1 → 0.30.2)
+
+`^0.30.0` covers 0.30.2, so `npm update gridsmith-ui` brings it in. Nothing in an app's code changes, and the theme's tokens need no regenerating. What to check:
+- **The Tab order.** A ScrollArea, a horizontal Timeline, a CodeBlock that doesn't wrap and a markdown table wider than its column are each a Tab stop while they scroll with nothing in them to Tab to. A test that counts Tab presses through such a page counts one more for each.
+- **Names.** Give a ScrollArea `aria-label` for what it holds, and a Tabs that collapses to a Dropdown on a phone `aria-label` for what its tabs choose between. A test that found Tabs' phone Dropdown by its chosen value finds it by role and name now (`getByRole('button', { name: 'Contents' })`, or the name you gave).
+- **Where focus goes.** After Load more's last load, focus is on the first new row, or its first control. After an overlay with no opener of its own closes back to its page's address, focus is in `<main>`. A test that expected focus on the page in either case finds it there.
+
+## 0.30.1 — 16 October 2026
 
 **Added.**
 - **VirtualizedList's name.** `aria-label` names the list for the Tab stop it becomes while it scrolls with nothing in it to Tab to ("Activity log"; default "List").

package/dist/charts.d.ts

@@ -2,6 +2,25 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * What a chart says besides its drawing (Sprint 25.8.9 items 4, 25, 26 and 27): its values as a table and a sentence of
+ * what it shows, each worked out from the chart's own props, so they stay true as the data changes. The sentence is a
+ * line on the page and the table one switch away, so a reader who can't see the colours, or can't see at all, gets the
+ * same as one who can (charts-6, charts-7, WCAG 1.4.1 and 1.1.1).
+ *
+ * Pure: each chart builds its own from the page's data, read by named fields, never from the copies it draws with
+ * (Sprint 25.29 item 14), so a row's own fields never reach the table's cells.
+ */
+/** A value a chart marks across its plot: a target or a limit as a line, or a band from `value` to `to`. */
+interface ChartReference {
+    /** Where the line sits, or where the band starts, on the value axis. */
+    value: number;
+    /** What it is ("Target", "Budget"): drawn beside it, and said in the sentence and under the table. */
+    label: string;
+    /** A band's other end. */
+    to?: number;
+}
+
 /**
  * Sprint 25.9, A3 — what a chart's category axis holds, and how its labels fit. No Recharts here: the charts entry and
  * the tests import it, and it never measures on its own (the measurer is handed in).
@@ -85,6 +104,21 @@ interface BarChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data (each series' highest and lowest, or its trend over dates), which it shows without one.
+     */
+    description?: string;
+    /** Targets or limits across the bars: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
+    references?: ChartReference[];
+    /**
+     * The first category whose values are a forecast (its `xAxisKey` value): from there each bar draws fainter in a dashed
+     * outline of its own colour, in a pale hatched band named by `forecastLabel` ("Forecast" without one) that runs to the
+     * chart's end, after a dashed line where it starts. A period not yet over is marked the same
+     * way, with the page's own words ("So far this month").
+     */
+    forecastFrom?: string | number;
+    forecastLabel?: string;
 }
 declare const BarChart: react.ForwardRefExoticComponent<BarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -122,6 +156,21 @@ interface LineChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data (its series' trends and highest points), which it shows without one.
+     */
+    description?: string;
+    /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
+    references?: ChartReference[];
+    /**
+     * The first category whose values are a forecast (its `xAxisKey` value): from there a pale hatched band, named by
+     * `forecastLabel` ("Forecast" without one), runs to the chart's end, after a dashed line where it starts, and each line
+     * keeps its own colour and mark through it. A period not yet over is marked the same
+     * way, with the page's own words ("So far this month").
+     */
+    forecastFrom?: string | number;
+    forecastLabel?: string;
 }
 declare const LineChart: react.ForwardRefExoticComponent<LineChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -159,6 +208,21 @@ interface AreaChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data (its series' trends and highest points), which it shows without one.
+     */
+    description?: string;
+    /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
+    references?: ChartReference[];
+    /**
+     * The first category whose values are a forecast (its `xAxisKey` value): from there a pale hatched band, named by
+     * `forecastLabel` ("Forecast" without one), runs to the chart's end, after a dashed line where it starts, and each area
+     * keeps its own colour and mark through it. A period not yet over is marked the same
+     * way, with the page's own words ("So far this month").
+     */
+    forecastFrom?: string | number;
+    forecastLabel?: string;
 }
 declare const AreaChart: react.ForwardRefExoticComponent<AreaChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -177,6 +241,11 @@ interface PieChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its parts (the largest and the smallest, with their shares), which it shows without one.
+     */
+    description?: string;
 }
 declare const PieChart: react.ForwardRefExoticComponent<PieChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -233,6 +302,20 @@ interface CompositeChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data, which it shows without one.
+     */
+    description?: string;
+    /** Targets or limits on the bars' axis: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
+    references?: ChartReference[];
+    /**
+     * The first category whose values are a forecast (its `xAxisKey` value): from there each bar draws fainter in a dashed
+     * outline of its own colour, in a pale hatched band named by `forecastLabel` ("Forecast" without one) that runs to the
+     * chart's end, after a dashed line where it starts; the lines keep their own colour and mark through it.
+     */
+    forecastFrom?: string | number;
+    forecastLabel?: string;
 }
 declare const CompositeChart: react.ForwardRefExoticComponent<CompositeChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -264,6 +347,11 @@ interface ScatterChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its points (how many, and the range of each value), which it shows without one.
+     */
+    description?: string;
 }
 declare const ScatterChart: react.ForwardRefExoticComponent<ScatterChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -286,6 +374,11 @@ interface RadarChartProps {
     valueFormat?: ValueFormat;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data (each series' highest and lowest), which it shows without one.
+     */
+    description?: string;
 }
 declare const RadarChart: react.ForwardRefExoticComponent<RadarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -306,6 +399,11 @@ interface RadialBarChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data, which it shows without one.
+     */
+    description?: string;
 }
 declare const RadialBarChart: react.ForwardRefExoticComponent<RadialBarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -324,6 +422,11 @@ interface FunnelChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data, which it shows without one.
+     */
+    description?: string;
 }
 declare const FunnelChart: react.ForwardRefExoticComponent<FunnelChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -341,6 +444,11 @@ interface TreemapChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data, which it shows without one.
+     */
+    description?: string;
 }
 declare const TreemapChart: react.ForwardRefExoticComponent<TreemapChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -361,6 +469,11 @@ interface SankeyChartProps {
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
+    /**
+     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
+     * from its data, which it shows without one.
+     */
+    description?: string;
 }
 declare const SankeyChart: react.ForwardRefExoticComponent<SankeyChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -404,4 +517,4 @@ declare function ChartContainer({ height, title, loading, emptyState, variant, c
  */
 declare function useChartColors(count: number, soft?: boolean): string[];
 
-export { AreaChart, type AreaChartProps, type AreaDef, BarChart, type BarChartProps, type BarDef, type CategoryKind, ChartContainer, CompositeChart, type CompositeChartProps, FunnelChart, type FunnelChartProps, LineChart, type LineChartProps, type LineDef, PieChart, type PieChartProps, RadarChart, type RadarChartProps, type RadarDataKey, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterSeries, Sparkline, type SparklineProps, TreemapChart, type TreemapChartProps, type TreemapNode, type ValueFormat, categoryKind, useChartColors };
+export { AreaChart, type AreaChartProps, type AreaDef, BarChart, type BarChartProps, type BarDef, type CategoryKind, ChartContainer, type ChartReference, CompositeChart, type CompositeChartProps, FunnelChart, type FunnelChartProps, LineChart, type LineChartProps, type LineDef, PieChart, type PieChartProps, RadarChart, type RadarChartProps, type RadarDataKey, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterSeries, Sparkline, type SparklineProps, TreemapChart, type TreemapChartProps, type TreemapNode, type ValueFormat, categoryKind, useChartColors };