gridsmith-ui 0.31.1 → 0.32.0

package/CHANGELOG.md

@@ -1,6 +1,51 @@
 # gridsmith-ui changelog
 
-## Unreleased (0.31.1)
+## 0.32.0 — 19 October 2026
+
+What the owner's look review of 19 October found (Sprint 25.33): charts with no textures and no worked-out sentence on show, a bulk-action bar that floats, tables that pin only while they scroll, chips as wide as their words, panes that pad what they hold, and the rail's selected item in the accent.
+
+**Added.**
+- **`patterns`** on LineChart, AreaChart, BarChart, CompositeChart, RadarChart, PieChart and RadialBarChart: each series after the first takes a mark of its own besides its colour (below, under Changed).
+- **Badge's and Tag's `width`:** a set of them takes one width, their text centred; a label too long for it is cut short, its whole text on hover.
+- **ScrollArea's `flush`:** content at the edge, for content that insets itself.
+- **SplitView's `detailFlush`:** the detail pane adds no inset, for one full-bleed piece: a conversation with its composer, a preview or an editor.
+
+**Changed.**
+- **Charts tell their series apart by colour and the key, with no textures or dashes by default.** Since 0.31.0 every series after the first drew a pattern or a dash. Bars, slices, areas and radial bars are now solid, and lines and outlines unbroken. `patterns` on LineChart, AreaChart, BarChart, CompositeChart, RadarChart, PieChart and RadialBarChart brings the marks back, in the legend and the tooltip too, for print or a team that needs series told apart without colour: colour and a key alone don't meet WCAG 1.4.1. Whatever `patterns` says, a line the page marks `dashed` keeps its dash, a series whose colour comes round again (a seventh) keeps its mark, ScatterChart keeps its symbols, and a forecast, a target line and a band keep their look.
+- **Parts that touch are 2 px apart.** A pie's slices and a funnel's stages are edged in the card's colour, and a stack's segments stop 2 px short of the next, the parts either side of zero too, so solid parts in neighbouring colours stay apart, with no white seam on a dark card. A pie of one slice draws no edge, so no seam runs from its centre.
+- **A chart's worked-out sentence is off the drawing.** The sentence a chart works out from its data showed above every drawing. A screen reader now hears it with the drawing, and the Table view shows it above the table. It says less: what the chart measures, over what, and the main trend of its first series (or of a stack's total, where its parts share a sign) with its one extreme, or, by name, the highest and the lowest; a bar and line chart whose bars stack reads the bars' total; a funnel keeps its carry-through, and a radial chart its highest and lowest. Values that read the same are said once, parts tied for the largest are named together, and a value axis titled with a unit alone ("£", "%") isn't taken for the measure.
+- **`description` is the chart's subtitle.** It replaced the worked-out sentence; it's now the page's own few words shown under the chart's title in both views, a container's fixed area included, and read before the worked-out sentence, which stays. A blank one is none.
+- **BulkActionBar floats at the foot of the page.** Written above a table, it pushed the page down as a row was selected (65 px in the review). It's now drawn over the content at the foot of the shell's content column, centred and as wide as what it holds, so selecting moves nothing; in a Drawer or a Dialog it floats at the foot of the body, above the footer, and outside the shell at the foot of the window. While it shows, the shell's content column, a pane, a Drawer or a Dialog keeps room under its last row, so the last rows scroll clear of it and keyboard focus stops short of it (a page outside the shell keeps none), and a row ticked from the keyboard at the foot of the view scrolls clear as the bar comes up. Two bars in one of them stack. Toasts at the bottom rise above it at every width, and on a phone it sits above the bottom tabs. It takes its bearing from where it's written as it appears and leaves nothing there, so a spaced stack round the table doesn't move either. When a keyboard press takes the bar away (an action that clears the selection, at once or once the server answers, Clear selection, or a confirmation the bar opened), focus goes to the table's select-all (on a phone, the first card's box), as it did above the table, or with none to find, where Tab would go on from where the bar is written. A click on the bar, or the user moving on meanwhile, leaves focus where it is; a confirmation the bar opened gives focus back as any dialog does, to the select-all once the bar has gone with the selection. The count is said through the ToastProvider's polite region as the selection changes ("3 selected"). It's one Tab stop, reached after the page's content, and the arrow keys, Home and End move between its controls (the APG's toolbar). In a host too narrow for its buttons its actions are one Actions menu, as on a phone.
+- **Badges and tags are as wide as what they say.** In a grid or a flex column they stretched to the column (a log's level badges went 337 px wide on a phone). `width` gives a set of them one width.
+- **A table pins its columns only while it scrolls sideways, in the colour of the cells beside them.** A table that fitted its frame still drew its pinned column in a second colour, and on a see-through theme the pinned column turned solid. Pinned cells now take the row's own surface, at its own opacity, over a solid ground.
+- **An icon-only column keeps its header for a screen reader, off screen.** A Table column whose every cell is icon buttons or links (an Actions column) drew its header over a column of icons. The header is now visually hidden and still read. A sortable header is never hidden, and a column where any cell shows text, or holds a checkbox, a switch, a rating, an image or a status icon, keeps its header drawn: it names what each cell shows or sets.
+- **The selected item of a vertical tab rail or a TreeView is a shade of the accent.** It took the tab strip's surface fill, which vanished on a surface. It now takes the sidebar's recipe, the 10% accent tint under the rail: `--ds-nav-v-active-bg` and `--ds-tree-active-bg` default to `var(--ds-accent-subtle)`.
+- **A ScrollArea's content starts 4 px inside its edges,** so a focus ring or a shadow at the edge isn't cut. `flush` keeps content at the edge, for content that insets itself, as the Sidebar's navigation does. A horizontal Timeline keeps 4 px inside its edges too, its first marker included once it has snapped.
+- **A form's reading width is for its fields.** FormWrapper held every row to the reading width, so a drop zone in a form didn't fill it. A FileUpload, RichTextEditor, TransferList, DataGrid or Table now fills the form's width, in a Field too, and the buttons of a form holding one end where it does. A `max-w-*` class on FormWrapper is the form's own width, and its rows take it, as `fullWidth` does. A row's or a Field's own `max-w-*` class wins over the reading width, a Field keeps the reading width inside a wider row, and a form with no wide control keeps its own width, so `mx-auto` centres it.
+- **A SplitView's panes pad what they hold, unless it runs edge to edge.** Both panes were flush, so a tree, a form or text in a pane sat at its edge, and pages padded some panes and not others. The list pane now pads at the sidebar's inset (8 px at the sides, 12 px above and below), and is flush once it holds a list or a board: a StackedList, Table, DataGrid, VirtualizedList, KanbanBoard, Gantt or CardGrid, at any depth. It stays flush through an empty result or a reload, so a search row of the page's own above the list, which insets itself, doesn't move. The detail pane pads at the page's gutter, 20 px above and below, and `detailFlush` makes it flush. A pane's heading (SectionHeading variant="pane") placed first is inset once, its rule reaching the pane's edges, and a tree's chevrons line up with it. On a phone the stacked panes pad the same way.
+- **On a phone, a SplitView framed as the page runs edge to edge.** A page-frame SplitView that spans its PageContainer's column, with nothing between them that draws or clips, drops its side edges and corners on a phone, and its text lines up with the page's title. A board on the canvas keeps its place until an item opens over it.
+
+**Fixed.**
+- **A bar chart's forecast bars start at `forecastFrom` when a row before it has no value.** The fainter, outlined look was keyed on the bars as drawn, which skip a row with no value, so it started a bar late.
+- **A forecast's name never crosses the line where it starts.** On a band narrower than its name (a forecast of the last month), "So far this month" was drawn across the dotted line that starts the band. It now ends at that line, beside the band, inside the plot.
+- **A date drawn with its time, or a relative time, stays whole in a Table.** RelativeTime's "18 Sept 2026, 17:30" wrapped its year onto a line of its own. A column of dates with a time of day, or of relative times ("3 hours ago", "yesterday"), now keeps each on one line, as a column of dates does, and a cell's full date for a screen reader no longer stops its column reading as dates.
+
+**Known limit.**
+- **In `layout="multi-column"`, a column that scrolls on its own keeps no room under the bulk-action bar,** so its last rows can sit under the bar. Give that column's foot room of its own while rows are selected. The other layouts keep it.
+
+### Upgrade note for agents (0.31.1 → 0.32.0)
+
+`^0.31.0` doesn't take 0.32.0: install it with `npm install gridsmith-ui@^0.32.0`, then regenerate gridsmith-tokens.css (get_tokens), so a rail's selected item takes the accent tint. What to check:
+- **Charts.** Series are solid, told apart by colour and the key. Pass `patterns` where a team must tell series apart without colour (WCAG 1.4.1, print). A chart's `description` is now a subtitle on show: keep it to a few words, or remove a long sentence the page wrote. A chart's title says what the chart is in fixed words, never a finding, and never one worked out from the data.
+- **BulkActionBar.** Write it after the list it acts on, in no box of your own: remove a fixed or sticky wrapper (gs:bulk-bar-placed-by-page warns). It's drawn in the shell's layer, outside the page's container, so a test that looked for it beside its table finds it in `[data-bulk-bar-layer]`. It's reached by Tab after the page's content, and its count is announced by the ToastProvider's polite region.
+- **Panes.** In a pane that pads, remove padding from what you pass to it (gs:container-content-padded warns); in a list pane that holds a list or a board, which is flush, a search or filter row above the list keeps its own inset. Pass `detailFlush` for a conversation, a preview or an editor, and put a pane's heading first in it, unwrapped (gs:splitview-pane-heading-padded). An inbox-style page that pads its own detail is padded twice until it does.
+- **Hand-built selected rows.** A row of your own that drew its selected state with `--ds-tab-active-bg` takes `--ds-nav-v-active-bg`, its text `--ds-nav-v-active-text` and any secondary text `--ds-nav-v-active-muted`, the tokens a StackedList's selected row and the rail take, which follow the theme.
+- **Badges and tags** are as wide as their words: give a set `width` for one width, or a `w-full` class for one that fills.
+- **Tables.** A table that fits its frame pins nothing, and pinned cells match their row. An icon-only column's header is off screen and still read.
+- **ScrollArea.** Its content starts 4 px in: pass `flush` for content that insets itself.
+- **FormWrapper.** A drop zone, an editor, a TransferList or a table fills the form's width; a `max-w-*` class on FormWrapper is the form's own width.
+
+## 0.31.1 — 18 October 2026
 
 **Fixed.**
 - **A closed Collapsible is out of the Tab order.** Its content was only out of sight, so a keyboard Tabbed into fields no one could see, and focus vanished: an event form's "More options" held its Location and Description. Closed, the content is now `inert`, out of the Tab order and the accessibility tree. Focus inside it when it closes goes back to its trigger; with no trigger that takes focus (the page's own button opens it, or the trigger is plain text), to the control before it, else the nearest place the page still holds. When a form sends focus to a field in a closed section (its only error, or an error summary's link), the section opens first, and the field takes focus in view.

package/dist/charts.d.ts

@@ -3,10 +3,19 @@ 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).
+ * What a chart says besides its drawing (Sprint 25.8.9 items 4, 25, 26 and 27): its values as a table and a summary of
+ * what it shows, each worked out from the chart's own props, so they stay true as the data changes. The summary is the
+ * chart's description for a screen reader, and shows as a line above the table in the Table view, one switch away for
+ * everyone (charts-6, charts-7, WCAG 1.4.1 and 1.1.1; data_visualisation#34, #35).
+ *
+ * Sprint 25.33 A2: a summary, never a list of every series. Per kind of chart:
+ * - over time: the measure (its series' names, else the value axis's title), the period from first to last, the main
+ *   trend and its one extreme;
+ * - by name: the measure, how many categories, the highest and the lowest;
+ * - parts of a whole: how many parts, the largest and its share (a funnel: what share of the first stage reaches the last);
+ * - a scatter chart: what's plotted against what, and how many points;
+ * - a Sankey chart: how many flows, and the largest.
+ * What the chart marks across its plot (a target, a range, where a forecast runs) is said after it.
  *
  * 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.
@@ -105,8 +114,10 @@ interface BarChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, how many categories or which period, and
+     * the highest and lowest or the main trend). The summary is for a screen reader, and shows above the table in the
+     * Table view.
      */
     description?: string;
     /** Targets or limits across the bars: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -119,12 +130,19 @@ interface BarChartProps {
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A pattern over the colour of each series after the first, in the legend and the tooltip too, for print or a team
+     * that needs series told apart without colour. Off by default: series are told apart by their colour and the key. A
+     * series whose colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const BarChart: react.ForwardRefExoticComponent<BarChartProps & react.RefAttributes<HTMLDivElement>>;
 
 interface LineDef {
     dataKey: string;
     label?: string;
+    /** The page's own dashed line, a dash no other line has: kept whatever the chart's `patterns` says. */
     dashed?: boolean;
 }
 interface LineChartProps {
@@ -157,8 +175,9 @@ interface LineChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period, and the first series' main
+     * trend and its one extreme). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
     /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -166,11 +185,17 @@ interface LineChartProps {
     /**
      * 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
+     * keeps its own colour and dash 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;
+    /**
+     * A dash of its own on each line after the first, in the legend and the tooltip too, for print or a team that needs
+     * lines told apart without colour. Off by default: lines are solid, told apart by their colour and the key. A line the
+     * page marks `dashed`, and a line whose colour comes round again (a seventh), are dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const LineChart: react.ForwardRefExoticComponent<LineChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -209,8 +234,10 @@ interface AreaChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period, and the main trend, of the
+     * first series or of the stack's total, with its one extreme). The summary is for a screen reader, and shows above the
+     * table in the Table view.
      */
     description?: string;
     /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -218,11 +245,17 @@ interface AreaChartProps {
     /**
      * 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
+     * keeps its own colour and outline 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;
+    /**
+     * A dash of its own on the outline of each area after the first, in the legend and the tooltip too, for print or a
+     * team that needs areas told apart without colour. Off by default: outlines are solid, the areas told apart by their
+     * colour and the key. An area whose colour comes round again (a seventh) is dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const AreaChart: react.ForwardRefExoticComponent<AreaChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -242,10 +275,17 @@ interface PieChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its parts (how many, and the largest with its share). The
+     * summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A pattern over the colour of each slice after the first, in the legend and the tooltip too, for print or a team that
+     * needs slices told apart without colour. Off by default: slices are told apart by their colour and the key, with a
+     * gap in the card's colour between them. A slice whose colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const PieChart: react.ForwardRefExoticComponent<PieChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -303,8 +343,9 @@ interface CompositeChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period and the first series' main
+     * trend). The summary is for a screen reader, and shows above the table in the Table view.
      */
     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`. */
@@ -312,10 +353,17 @@ interface CompositeChartProps {
     /**
      * 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.
+     * chart's end, after a dashed line where it starts; the lines keep their own colour and dash through it.
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A pattern over the colour of each bar series after the first, and a dash on each line after the first, in the legend
+     * and the tooltip too, for print or a team that needs series told apart without colour. Off by default: series are
+     * told apart by their colour and the key, and bars from lines by their form. A line the page marks `dashed`, and a
+     * series whose colour comes round again (a seventh), keep their mark either way.
+     */
+    patterns?: boolean;
 }
 declare const CompositeChart: react.ForwardRefExoticComponent<CompositeChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -348,8 +396,9 @@ interface ScatterChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its points (what's plotted against what, and how many points).
+     * The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -375,10 +424,17 @@ interface RadarChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, how many categories, and the first
+     * series' highest and lowest). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A dash of its own on the outline of each shape after the first, in the legend and the tooltip too, for print or a
+     * team that needs shapes told apart without colour. Off by default: outlines are solid, the shapes told apart by their
+     * colour and the key. A shape whose colour comes round again (a seventh) is dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const RadarChart: react.ForwardRefExoticComponent<RadarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -400,10 +456,17 @@ interface RadialBarChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many bars, the highest and the lowest). The
+     * summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A pattern over the colour of each bar after the first, in the legend and the tooltip too, for print or a team that
+     * needs bars told apart without colour. Off by default: bars are told apart by their colour and the key. A bar whose
+     * colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const RadialBarChart: react.ForwardRefExoticComponent<RadialBarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -423,8 +486,9 @@ interface FunnelChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (its stages, from the first to the last, and the share
+     * of the first that reaches the last). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -445,8 +509,9 @@ interface TreemapChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many tiles in how many groups, and the largest with
+     * its share). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -470,8 +535,9 @@ interface SankeyChartProps {
     "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.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many flows, and the largest). The summary is for a
+     * screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -499,7 +565,12 @@ interface ChartContainerProps {
      * A preset (sm, md, lg) or a number of px sets this chart's height instead, and beats the chart's own.
      */
     height?: "auto" | "sm" | "md" | "lg" | number;
-    /** The insight, as a heading (h3) in the card-title style, never cut. The chart's graphic is named by it. */
+    /**
+     * What the chart is, in fixed words ("Revenue and expenses by month"): it may name the record or period it's about
+     * ("Hours by person, Apollo project", "Revenue, 2026"), never a finding, and is never worked out from the data, since
+     * a finding changes as the data does (the owner's rule, 19 October; data_visualisation#3). A heading (h3) in the
+     * card-title style, never cut; the chart's graphic is named by it.
+     */
     title?: string;
     loading?: boolean;
     emptyState?: ReactNode;