@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/chart.json

@@ -0,0 +1,1406 @@
+{
+  "family": "chart",
+  "ui": "chart",
+  "binding": "react",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Line, bar, area, pie and scatter charts."
+  },
+  "axes": {
+    "kind": [
+      "line",
+      "area",
+      "bar",
+      "pie",
+      "scatter"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "orientation": [
+      "vertical",
+      "horizontal"
+    ],
+    "stackMode": [
+      "normal",
+      "percent"
+    ],
+    "curve": [
+      "linear",
+      "monotone",
+      "step"
+    ],
+    "stroke": [
+      "solid",
+      "dashed"
+    ],
+    "markers": [
+      "none",
+      "last",
+      "all"
+    ],
+    "grid": [
+      "horizontal",
+      "vertical",
+      "both",
+      "none"
+    ],
+    "trigger": [
+      "axis",
+      "item",
+      "none"
+    ],
+    "indicator": [
+      "dot",
+      "line",
+      "none"
+    ],
+    "sort": [
+      "none",
+      "asc",
+      "desc"
+    ],
+    "renderer": [
+      "auto",
+      "svg",
+      "canvas"
+    ],
+    "scale": [
+      "linear",
+      "log"
+    ],
+    "xType": [
+      "category",
+      "time",
+      "value"
+    ],
+    "tone": [
+      "neutral",
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "slot": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8"
+    ],
+    "variant": [
+      "plain",
+      "card"
+    ],
+    "toolbar": [
+      "visible",
+      "hover",
+      "none"
+    ],
+    "palette": [
+      "categorical",
+      "sequential",
+      "focus"
+    ],
+    "legendOverflow": [
+      "collapse",
+      "wrap"
+    ]
+  },
+  "members": {
+    "chart": {
+      "nativeElement": "figure",
+      "defaults": {
+        "size": "md",
+        "orientation": "vertical",
+        "stackMode": "normal",
+        "curve": "linear",
+        "stroke": "solid",
+        "markers": "none",
+        "grid": "horizontal",
+        "trigger": "axis",
+        "indicator": "dot",
+        "sort": "none",
+        "renderer": "auto",
+        "sampling": "auto",
+        "texture": false,
+        "zoomable": false,
+        "selectable": false,
+        "legendInteractive": true,
+        "legendValues": false,
+        "tableOpen": false,
+        "variant": "plain",
+        "toolbar": "visible",
+        "palette": "categorical",
+        "legendOverflow": "collapse",
+        "fullscreen": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "orientation",
+        "measurement",
+        "content",
+        "loading",
+        "live",
+        "current",
+        "selection",
+        "open",
+        "visibility",
+        "zoom",
+        "fullscreen"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "loading",
+        "pressed",
+        "current",
+        "selected",
+        "open",
+        "fullscreen"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "description",
+        "help",
+        "help-content",
+        "actions",
+        "toolbar",
+        "zoom-reset",
+        "view-toggle",
+        "fullscreen-toggle",
+        "menu-trigger",
+        "menu",
+        "menu-item",
+        "legend",
+        "legend-item",
+        "legend-marker",
+        "legend-label",
+        "legend-value",
+        "legend-more",
+        "plot",
+        "canvas",
+        "crosshair",
+        "marker",
+        "center",
+        "center-value",
+        "center-label",
+        "tooltip",
+        "tooltip-title",
+        "tooltip-item",
+        "tooltip-marker",
+        "tooltip-label",
+        "tooltip-value",
+        "tooltip-total",
+        "skeleton",
+        "empty",
+        "error",
+        "summary",
+        "table-region",
+        "table"
+      ]
+    }
+  },
+  "docs": {
+    "chart": {
+      "imports": {
+        "source": "import { Chart, ChartDefaultsProvider, ChartTooltipContent, preloadChartEngine } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "figure",
+          "required": true,
+          "purpose": "The chart and everything around it. A size container: the toolbar, the legend and the plot height answer the width the page gives it, not the viewport."
+        },
+        {
+          "part": "header",
+          "element": "figcaption",
+          "required": false,
+          "purpose": "The caption: title, description, help and the controls. Present when any of them is; the figure is named by it."
+        },
+        {
+          "part": "title",
+          "element": "div",
+          "required": false,
+          "purpose": "The chart’s name, and the accessible name of the plot. Wraps in the plain variant; one line with an ellipsis in a card."
+        },
+        {
+          "part": "description",
+          "element": "div",
+          "required": false,
+          "purpose": "One line under the title. Its line is reserved in the card variant, so tiles with and without one keep one height."
+        },
+        {
+          "part": "help",
+          "element": "button",
+          "required": false,
+          "purpose": "An information control beside the title that opens the help note. Present with help."
+        },
+        {
+          "part": "help-content",
+          "element": "div",
+          "required": false,
+          "purpose": "The help note, a popover anchored to its control."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s own controls, before the toolbar: a period picker, a link."
+        },
+        {
+          "part": "toolbar",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"toolbar\": zoom reset, the table view, full screen and the menu. While loading, failed or with no data it keeps its box, hidden, inert and out of the accessibility tree (data-waiting), so the header wraps at one width; absent with toolbar=\"none\"."
+        },
+        {
+          "part": "zoom-reset",
+          "element": "button",
+          "required": false,
+          "purpose": "Gives the whole domain back. Present only while zoomed."
+        },
+        {
+          "part": "view-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Switches the plot between the drawing and the table, aria-pressed. Leaves the row for the menu below 480 pixels."
+        },
+        {
+          "part": "fullscreen-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Takes the whole screen and gives it back, aria-pressed. Leaves the row for the menu below 480 pixels."
+        },
+        {
+          "part": "menu-trigger",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens the menu of further actions, aria-haspopup=\"menu\"."
+        },
+        {
+          "part": "menu",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"menu\" in a popover: the table view and full screen when the row has no room for them, then CSV and image."
+        },
+        {
+          "part": "menu-item",
+          "element": "button",
+          "required": false,
+          "purpose": "role=\"menuitem\"; arrows move between them, Escape returns focus to the trigger."
+        },
+        {
+          "part": "legend",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"toolbar\" of series toggles on one line; what does not fit waits behind legend-more. Absent with legend={false}."
+        },
+        {
+          "part": "legend-item",
+          "element": "button",
+          "required": false,
+          "purpose": "One series. aria-pressed says whether it is drawn; a click hides it, Shift+click shows it alone. A span when legendInteractive is false."
+        },
+        {
+          "part": "legend-marker",
+          "element": "span",
+          "required": false,
+          "purpose": "The series’ mark in its colour and shape: a line, a bar or a dot, dashed when the series is."
+        },
+        {
+          "part": "legend-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The series’ name, truncated with the whole name in its title."
+        },
+        {
+          "part": "legend-value",
+          "element": "span",
+          "required": false,
+          "purpose": "The series’ value at the active point, or its last value. Present with legendValues."
+        },
+        {
+          "part": "legend-more",
+          "element": "button",
+          "required": false,
+          "purpose": "“+N”: opens the series that did not fit, as a popover of the same toggles."
+        },
+        {
+          "part": "plot",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\" named by the title and described by the summary; the one tab stop of the drawing. Its height is the size step and does not change with the state."
+        },
+        {
+          "part": "canvas",
+          "element": "div",
+          "required": true,
+          "purpose": "Where the engine draws, aria-hidden. SVG by default, canvas for large series."
+        },
+        {
+          "part": "crosshair",
+          "element": "div",
+          "required": false,
+          "purpose": "The band or the line under the active category, drawn in HTML over the engine."
+        },
+        {
+          "part": "marker",
+          "element": "span",
+          "required": false,
+          "purpose": "A ring on each series’ point at the active category."
+        },
+        {
+          "part": "center",
+          "element": "div",
+          "required": false,
+          "purpose": "The middle of a donut: the total by default, or renderCenter."
+        },
+        {
+          "part": "center-value",
+          "element": "span",
+          "required": false,
+          "purpose": "The total, in the series’ format."
+        },
+        {
+          "part": "center-label",
+          "element": "span",
+          "required": false,
+          "purpose": "What the total is: the total message."
+        },
+        {
+          "part": "tooltip",
+          "element": "div",
+          "required": false,
+          "purpose": "The readout at the active point, aria-hidden: the live region says the same once. Docks under the plot when the chart is narrower than 360 pixels."
+        },
+        {
+          "part": "tooltip-title",
+          "element": "div",
+          "required": false,
+          "purpose": "The category, or the date in the time axis’ format."
+        },
+        {
+          "part": "tooltip-item",
+          "element": "div",
+          "required": false,
+          "purpose": "One series’ row; data-current marks the one under the pointer."
+        },
+        {
+          "part": "tooltip-marker",
+          "element": "span",
+          "required": false,
+          "purpose": "The series’ mark, as tooltip.indicator says."
+        },
+        {
+          "part": "tooltip-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The series’ name."
+        },
+        {
+          "part": "tooltip-value",
+          "element": "span",
+          "required": false,
+          "purpose": "The value in the series’ format, with the share of the whole on a pie."
+        },
+        {
+          "part": "tooltip-total",
+          "element": "div",
+          "required": false,
+          "purpose": "The total of a stack. On by default for stacked series."
+        },
+        {
+          "part": "skeleton",
+          "element": "div",
+          "required": false,
+          "purpose": "The anatomy of the kind being loaded — bars, a line or a ring over axis lines — in the plot’s own box, with a line of legend above."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "No data, or every series hidden. The second offers “Show all”. Same box as the drawing."
+        },
+        {
+          "part": "error",
+          "element": "div",
+          "required": false,
+          "purpose": "The drawing failed or the data did not arrive, with retry when onRetry is given."
+        },
+        {
+          "part": "summary",
+          "element": "div",
+          "required": true,
+          "purpose": "The generated description, visually hidden: kind, series, points, range, minimum and maximum of each."
+        },
+        {
+          "part": "table-region",
+          "element": "div",
+          "required": false,
+          "purpose": "The table view, inside the plot’s box so the card keeps its height; scrolls on its own, focusable."
+        },
+        {
+          "part": "table",
+          "element": "table",
+          "required": false,
+          "purpose": "Every visible series by category, numbers in their formats, the title as caption."
+        }
+      ],
+      "api": [
+        {
+          "name": "data",
+          "type": "readonly ChartRecord[]",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "One record per category or per point. Fields are named by x and by each series"
+        },
+        {
+          "name": "series",
+          "type": "readonly ChartSeries[]",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "What is drawn: kind, field, label, and how. Order is legend order and colour order"
+        },
+        {
+          "name": "x",
+          "type": "ChartXAxis",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The category field, and its type (category, time, value), label, format and extent"
+        },
+        {
+          "name": "y",
+          "type": "ChartYAxis | [ChartYAxis, ChartYAxis]",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The value axis, or the start and end axes: label, format, scale, extent"
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "x, y",
+          "description": "The lowest value the axis must hold. The data widens the extent, never narrows it"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "x, y",
+          "description": "The highest value the axis must hold"
+        },
+        {
+          "name": "scale",
+          "type": "'linear' | 'log'",
+          "defaultValue": "linear",
+          "appliesTo": "y",
+          "description": "A logarithmic value axis"
+        },
+        {
+          "name": "orientation",
+          "type": "'vertical' | 'horizontal'",
+          "defaultValue": "vertical",
+          "appliesTo": "Chart",
+          "description": "Which way categories run. Horizontal bars for a ranking with long names"
+        },
+        {
+          "name": "stackMode",
+          "type": "'normal' | 'percent'",
+          "defaultValue": "normal",
+          "appliesTo": "Chart",
+          "description": "How series that share a stack add up: to a total, or to 100 %"
+        },
+        {
+          "name": "curve",
+          "type": "'linear' | 'monotone' | 'step'",
+          "defaultValue": "linear",
+          "appliesTo": "series",
+          "description": "How a line or an area passes through its points"
+        },
+        {
+          "name": "stroke",
+          "type": "'solid' | 'dashed'",
+          "defaultValue": "solid",
+          "appliesTo": "series",
+          "description": "A dashed line for a reference"
+        },
+        {
+          "name": "markers",
+          "type": "'none' | 'last' | 'all'",
+          "defaultValue": "none",
+          "appliesTo": "series",
+          "description": "Dots on a line: none, the last point, or every point"
+        },
+        {
+          "name": "annotations",
+          "type": "readonly ChartAnnotation[]",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "Lines and bands on either axis, labelled, in a tone. On the category axis a value names a category by its key or its x value; one that names none is not drawn"
+        },
+        {
+          "name": "recordKey",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The field that names a record when x is a value axis, for points and selection"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "BCP 47, for every number and date; the language in force when absent"
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The caption, and the plot’s accessible name. Not the native title attribute"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "One line under the title"
+        },
+        {
+          "name": "help",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "A note behind an information control beside the title"
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The consumer’s own controls, before the toolbar"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ChartMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "Words laid over the language in force, key by key: every word the chart writes or says, with {slots}"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Chart",
+          "description": "The plot height: 192, 256 or 384 pixels"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'card'",
+          "defaultValue": "plain",
+          "appliesTo": "Chart",
+          "description": "On the page’s surface, or on its own card that fills its grid cell"
+        },
+        {
+          "name": "palette",
+          "type": "'categorical' | 'sequential' | 'focus'",
+          "defaultValue": "categorical",
+          "appliesTo": "Chart",
+          "description": "Which ramp the eight slots take"
+        },
+        {
+          "name": "toolbar",
+          "type": "'visible' | 'hover' | 'none'",
+          "defaultValue": "visible",
+          "appliesTo": "Chart",
+          "description": "When the toolbar shows: always, on hover or focus within, or never"
+        },
+        {
+          "name": "grid",
+          "type": "'horizontal' | 'vertical' | 'both' | 'none'",
+          "defaultValue": "horizontal",
+          "appliesTo": "Chart",
+          "description": "Which grid lines are drawn"
+        },
+        {
+          "name": "texture",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "A pattern per slot, as a second channel beside colour"
+        },
+        {
+          "name": "renderer",
+          "type": "'auto' | 'svg' | 'canvas'",
+          "defaultValue": "auto",
+          "appliesTo": "Chart",
+          "description": "SVG, or canvas past a few thousand points"
+        },
+        {
+          "name": "sampling",
+          "type": "'auto' | 'none'",
+          "defaultValue": "auto",
+          "appliesTo": "Chart",
+          "description": "Downsamples a long line for the screen; the table keeps every value"
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Chart",
+          "description": "Transitions; off under reduced motion regardless"
+        },
+        {
+          "name": "legend",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Chart",
+          "description": "Whether the legend is drawn"
+        },
+        {
+          "name": "legendInteractive",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Chart",
+          "description": "Legend items as toggles, or as a static key"
+        },
+        {
+          "name": "legendValues",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "Each item’s value at the active point, or its last"
+        },
+        {
+          "name": "legendOverflow",
+          "type": "'collapse' | 'wrap'",
+          "defaultValue": "collapse",
+          "appliesTo": "Chart",
+          "description": "One line and +N, or as many lines as it takes"
+        },
+        {
+          "name": "trigger",
+          "type": "'axis' | 'item' | 'none'",
+          "defaultValue": "axis",
+          "appliesTo": "Chart",
+          "description": "What the tooltip reads: the category, the point, or nothing. item for pie and scatter"
+        },
+        {
+          "name": "tooltip",
+          "type": "ChartTooltipSettings",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "sort, total and indicator for the default tooltip"
+        },
+        {
+          "name": "indicator",
+          "type": "'dot' | 'line' | 'none'",
+          "defaultValue": "dot",
+          "appliesTo": "tooltip",
+          "description": "The mark beside each tooltip row"
+        },
+        {
+          "name": "sort",
+          "type": "'none' | 'asc' | 'desc'",
+          "defaultValue": "none",
+          "appliesTo": "tooltip",
+          "description": "Tooltip rows in series order, or by value"
+        },
+        {
+          "name": "zoomable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "Drag, Ctrl+wheel and + − 0 zoom the x axis"
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "A click or Enter selects a point"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "The skeleton of the kind being loaded, in the plot’s box"
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "The data did not arrive"
+        },
+        {
+          "name": "hidden",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The series ids the legend hides, controlled"
+        },
+        {
+          "name": "defaultHidden",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "Chart",
+          "description": "The series hidden at first"
+        },
+        {
+          "name": "activePoint",
+          "type": "ChartPoint | null",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The point being read, controlled"
+        },
+        {
+          "name": "defaultActivePoint",
+          "type": "ChartPoint | null",
+          "defaultValue": "null",
+          "appliesTo": "Chart",
+          "description": "The point read at first"
+        },
+        {
+          "name": "selection",
+          "type": "ChartPoint | null",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The selected point, controlled"
+        },
+        {
+          "name": "defaultSelection",
+          "type": "ChartPoint | null",
+          "defaultValue": "null",
+          "appliesTo": "Chart",
+          "description": "The point selected at first"
+        },
+        {
+          "name": "zoom",
+          "type": "ChartZoom",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The visible fraction of the x domain, controlled"
+        },
+        {
+          "name": "defaultZoom",
+          "type": "ChartZoom",
+          "defaultValue": "{ start: 0, end: 1 }",
+          "appliesTo": "Chart",
+          "description": "The zoom at first"
+        },
+        {
+          "name": "tableOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "Whether the plot shows the table, controlled"
+        },
+        {
+          "name": "defaultTableOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "The table open at first"
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "Whether the chart has the screen, controlled"
+        },
+        {
+          "name": "defaultFullscreen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Chart",
+          "description": "Full screen at first"
+        }
+      ],
+      "composition": [
+        {
+          "name": "renderTooltip",
+          "type": "(context, model) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The tooltip’s content; the box, placement and dock stay. ChartTooltipContent is the default, to wrap or extend"
+        },
+        {
+          "name": "renderLegendItem",
+          "type": "(entry, props, fallback) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "One legend item. props carry the toggle’s wiring; fallback is the default content"
+        },
+        {
+          "name": "renderCenter",
+          "type": "(model) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The middle of a donut"
+        },
+        {
+          "name": "renderEmpty",
+          "type": "(reason: 'no-data' | 'all-hidden') => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The empty state"
+        },
+        {
+          "name": "renderError",
+          "type": "() => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The error state"
+        },
+        {
+          "name": "render",
+          "type": "(props: ChartRootProps) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "Substitutes the figure. Every data attribute and handler is handed to it"
+        },
+        {
+          "name": "extendOption",
+          "type": "(option) => option",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The engine’s option before it is drawn: the escape hatch for what the contract does not say"
+        },
+        {
+          "name": "handleRef",
+          "type": "Ref<ChartHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "focus(), resetZoom(), toDataURL() and toCsv()"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "Chart",
+          "description": "The figure. Native attributes pass through"
+        },
+        {
+          "name": "ChartDefaultsProvider",
+          "type": "ChartDefaults",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "size, variant, palette, toolbar, renderer, grid, legendOverflow, tooltip and animate, once; a prop still wins"
+        },
+        {
+          "name": "preloadChartEngine",
+          "type": "(kinds?: ChartKind[]) => Promise<void>",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Fetches the engine chunks ahead of the first chart, on a route’s loader"
+        }
+      ],
+      "events": [
+        {
+          "name": "onHiddenChange",
+          "payload": "(hidden: readonly string[], request: ChangeRequest<readonly string[]>)",
+          "when": "Before a series is hidden or shown from the legend, from “Show all”, or isolated with Shift. Reasons: pointer, keyboard, programmatic. cancel() refuses it."
+        },
+        {
+          "name": "onActivePointChange",
+          "payload": "(point: ChartPoint | null, request: ChangeRequest<ChartPoint | null>)",
+          "when": "When the pointer or the arrows reach a point, and when it leaves: pointer, keyboard, blur, escape. The value two charts share to move together."
+        },
+        {
+          "name": "onSelectionChange",
+          "payload": "(point: ChartPoint | null, request: ChangeRequest<ChartPoint | null>)",
+          "when": "With selectable, on a click or Enter on a point, and on Escape: pointer, keyboard, escape, programmatic."
+        },
+        {
+          "name": "onZoomChange",
+          "payload": "(zoom: ChartZoom, request: ChangeRequest<ChartZoom>)",
+          "when": "With zoomable, on a drag, a wheel with Ctrl, + or −, 0 or the reset control: pointer, keyboard, clear, escape, programmatic. start and end are fractions of the domain."
+        },
+        {
+          "name": "onTableOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the plot switches between the drawing and the table: pointer, keyboard, escape, programmatic."
+        },
+        {
+          "name": "onFullscreenChange",
+          "payload": "(fullscreen: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the chart takes or gives back the screen, and when the browser leaves full screen on its own: pointer, keyboard, escape, programmatic."
+        },
+        {
+          "name": "onRetry",
+          "payload": "()",
+          "when": "On the retry action of the error state."
+        }
+      ],
+      "accessibility": [
+        "The figure is named by its caption, and the plot is one tab stop with role=\"group\", aria-roledescription=\"chart\", the title as its name and a generated summary as its description: kind, series, points, and the range, minimum and maximum of each series.",
+        "Inside the plot the keyboard follows an adaptation of the APG Grid pattern: Left and Right move along the categories, Up and Down between series, Home and End to the ends, Page keys by a tenth; Enter selects, + − and 0 zoom, Escape clears. The tooltip is aria-hidden, and a polite live region says the point reached — only the last one, so holding an arrow does not queue twelve sentences.",
+        "The legend is a toolbar of toggle buttons with a roving tab stop: aria-pressed says whether a series is drawn, Enter hides it, Shift+Enter shows it alone, and the live region confirms the change.",
+        "Every chart has a table view with the same numbers in their formats, reachable from the toolbar or the menu; it is the complete reading for anyone the drawing does not serve.",
+        "Colour is never the only channel: series differ in stroke and marker shape, texture adds a pattern per slot, and under forced colours the drawing is redrawn in system colours with the legend markers kept by mask.",
+        "The eight slots of the data scale keep adjacent colours apart under simulated protanopia and deuteranopia in every scheme, and each clears 3:1 against the surface."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-chart-area-opacity",
+    "--slotted-chart-axis-color",
+    "--slotted-chart-band-color",
+    "--slotted-chart-bar-radius",
+    "--slotted-chart-card-padding-block",
+    "--slotted-chart-card-padding-inline",
+    "--slotted-chart-card-radius",
+    "--slotted-chart-color-1",
+    "--slotted-chart-color-2",
+    "--slotted-chart-color-3",
+    "--slotted-chart-color-4",
+    "--slotted-chart-color-5",
+    "--slotted-chart-color-6",
+    "--slotted-chart-color-7",
+    "--slotted-chart-color-8",
+    "--slotted-chart-crosshair-color",
+    "--slotted-chart-focus-color",
+    "--slotted-chart-gap",
+    "--slotted-chart-grid-color",
+    "--slotted-chart-inset",
+    "--slotted-chart-label-color",
+    "--slotted-chart-label-size",
+    "--slotted-chart-line-width",
+    "--slotted-chart-marker-size",
+    "--slotted-chart-plot-block-size",
+    "--slotted-chart-plot-block-size-lg",
+    "--slotted-chart-plot-block-size-sm",
+    "--slotted-chart-radius",
+    "--slotted-chart-reference-color",
+    "--slotted-chart-sequential-color",
+    "--slotted-chart-skeleton-hole",
+    "--slotted-chart-surface",
+    "--slotted-chart-tooltip-surface",
+    "--slotted-control-border-color",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-sm",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-radius",
+    "--slotted-data-1",
+    "--slotted-data-2",
+    "--slotted-data-3",
+    "--slotted-data-4",
+    "--slotted-data-5",
+    "--slotted-data-6",
+    "--slotted-data-7",
+    "--slotted-data-8",
+    "--slotted-duration-instant",
+    "--slotted-duration-long",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-2xl",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xl",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-2xl",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-surface-raised",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-text",
+    "--slotted-z-index-overlay",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One chart driven by the controls: kind, size, variant, palette, toolbar, trigger and legend. Hover, then Tab into the plot and walk it with the arrows.",
+      "language": "tsx",
+      "source": "<Chart\n  data={monthly}\n  series={[{ kind: 'line', field: 'revenue', label: 'Receita' }]}\n  title=\"Receita\"\n  x={{ field: 'month' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "line",
+      "title": "Lines for a trend",
+      "note": "Revenue and cost with a marker on the last point, and the target dashed in the neutral tone so it reads as a reference before its colour does.",
+      "language": "tsx",
+      "source": "<Chart\n  data={monthly}\n  series={[\n    { kind: 'line', field: 'revenue', label: 'Receita', markers: 'last' },\n    { kind: 'line', field: 'cost', label: 'Custo', markers: 'last' },\n    { kind: 'line', field: 'target', label: 'Meta', tone: 'neutral', stroke: 'dashed' },\n  ]}\n  title=\"Receita e custo\"\n  x={{ field: 'month', label: 'Mês' }}\n  y={{ format: brlThousands }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "area",
+      "title": "Areas, stacked and smoothed",
+      "note": "Three channels stacked with a monotone curve: the wash sits under each line and the tooltip adds the stack’s total.",
+      "language": "tsx",
+      "source": "<Chart\n  data={sessions}\n  series={channels.map((channel) => ({\n    ...channel,\n    kind: 'area',\n    stack: 'canal',\n    curve: 'monotone',\n  }))}\n  title=\"Sessões por canal\"\n  x={{ field: 'month' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "bar",
+      "title": "Grouped bars",
+      "note": "Three channels side by side in each month; the band under the pointer lights the whole category, not one bar.",
+      "language": "tsx",
+      "source": "<Chart data={orders} series={channels} title=\"Pedidos por canal\" x={{ field: 'month' }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "bar-horizontal",
+      "title": "A ranking reads across",
+      "note": "Horizontal bars with value labels: long category names get the room a vertical axis cannot give them.",
+      "language": "tsx",
+      "source": "<Chart\n  data={regions}\n  orientation=\"horizontal\"\n  series={[{ kind: 'bar', field: 'value', label: 'Receita', labels: true }]}\n  title=\"Receita por região\"\n  x={{ field: 'region' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "stacked",
+      "title": "Bars stacked into a total",
+      "note": "Series that share a stack id pile up; the tooltip lists each and closes with the total of the pile.",
+      "language": "tsx",
+      "source": "<Chart {...orders} series={channels.map((channel) => ({ ...channel, stack: 'total' }))} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "stacked-percent",
+      "title": "Shares of a whole",
+      "note": "stackMode=\"percent\" draws each month as 100 %, so a channel growing in share reads even when the total falls.",
+      "language": "tsx",
+      "source": "<Chart\n  data={orders}\n  series={channels.map((channel) => ({ ...channel, kind: 'area', stack: 'total' }))}\n  stackMode=\"percent\"\n  title=\"Participação por canal\"\n  x={{ field: 'month' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "combo",
+      "title": "Bars and a line on one axis",
+      "note": "Revenue as bars and the target as a dashed line with markers: one kind per meaning, one scale for both.",
+      "language": "tsx",
+      "source": "const series: ChartSeries[] = [\n  { kind: 'bar', field: 'revenue', label: 'Receita' },\n  {\n    kind: 'line',\n    field: 'target',\n    label: 'Meta',\n    tone: 'neutral',\n    stroke: 'dashed',\n    markers: 'all',\n  },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "dual-axis",
+      "title": "Two units, two axes",
+      "note": "Orders on the start axis and margin in percent on the end one; each axis is named at its own top, so neither needs the legend to be read.",
+      "language": "tsx",
+      "source": "<Chart\n  data={monthly}\n  series={[\n    { kind: 'bar', field: 'orders', label: 'Pedidos' },\n    { kind: 'line', field: 'margin', label: 'Margem', axis: 'end', markers: 'all' },\n  ]}\n  title=\"Pedidos e margem\"\n  x={{ field: 'month' }}\n  y={[{ label: 'Pedidos' }, { label: 'Margem', format: { style: 'percent' } }]}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "time-axis",
+      "title": "Dates on a time axis",
+      "note": "Forty days of sessions: ticks fall on real dates, gaps in the calendar stay gaps, and the dates are wall-clock days, not shifted by the reader’s time zone.",
+      "language": "tsx",
+      "source": "<Chart\n  data={daily}\n  series={[{ kind: 'area', field: 'sessions', label: 'Sessões' }]}\n  title=\"Sessões diárias\"\n  x={{ field: 'day', type: 'time' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "log-scale",
+      "title": "Growth by orders of magnitude",
+      "note": "Active users doubling each month on a logarithmic scale: a steady rate is a straight line, and the early months are not flattened into the floor.",
+      "language": "tsx",
+      "source": "<Chart {...users} y={{ scale: 'log', format: { notation: 'compact' } }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "pie",
+      "title": "Parts of a whole",
+      "note": "Revenue by region with labels outside the slices; the tooltip adds each slice’s share of the total.",
+      "language": "tsx",
+      "source": "<Chart\n  data={regions}\n  series={[{ kind: 'pie', field: 'value', label: 'Receita', labels: true }]}\n  title=\"Receita por região\"\n  x={{ field: 'region' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "donut",
+      "title": "A donut with the total inside",
+      "note": "innerRadius opens the middle, and the center holds the total; legendValues puts each slice’s value beside its name.",
+      "language": "tsx",
+      "source": "<Chart\n  data={tickets}\n  legendValues\n  series={[{ kind: 'pie', field: 'n', label: 'Tickets', innerRadius: 0.64 }]}\n  title=\"Tickets por estado\"\n  x={{ field: 'status' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "scatter",
+      "title": "Two measures of each record",
+      "note": "Sixty tickets by effort and impact in two groups; the tooltip follows the point, not the axis, because a value axis has no categories to gather.",
+      "language": "tsx",
+      "source": "<Chart\n  data={tickets}\n  recordKey=\"id\"\n  series={[\n    { kind: 'scatter', field: 'product', label: 'Produto' },\n    { kind: 'scatter', field: 'infra', label: 'Infraestrutura' },\n  ]}\n  title=\"Esforço e impacto\"\n  x={{ field: 'effort', type: 'value', label: 'Esforço (h)' }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "bubble",
+      "title": "A third measure as size",
+      "note": "sizeField scales each dot by the customers affected, by area rather than radius, so twice the customers reads as twice the ink.",
+      "language": "tsx",
+      "source": "const product: ChartSeries = {\n  kind: 'scatter',\n  field: 'product',\n  label: 'Produto',\n  sizeField: 'customers',\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "annotations",
+      "title": "Targets, ranges and events",
+      "note": "A band for the tolerance range, a line for the annual target and a vertical line on the month the campaign started — each labelled on the plot.",
+      "language": "tsx",
+      "source": "const annotations: ChartAnnotation[] = [\n  { kind: 'band', from: 55, to: 70, label: 'Tolerância', tone: 'success' },\n  { kind: 'line', value: 80, label: 'Meta anual', tone: 'danger' },\n  { kind: 'line', axis: 'x', value: 'jun', label: 'Campanha' },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "legend",
+      "title": "A legend that toggles",
+      "note": "Click a series to hide it, Shift+click to show it alone; arrows move along the legend. The legend holds one line: narrower than its items, the ones that do not fit wait behind +N.",
+      "language": "tsx",
+      "source": "const [hidden, setHidden] = useState<readonly string[]>([]);\n\n<Chart {...channels} hidden={hidden} onHiddenChange={setHidden} title=\"Canais de aquisição\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "legend-values",
+      "title": "Values in the legend",
+      "note": "Each legend item carries its series’ value at the active point, and the last value when nothing is active — a readout that never covers the drawing.",
+      "language": "tsx",
+      "source": "<Chart {...channels} legendValues title=\"Canais de aquisição\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tooltip-modes",
+      "title": "Three ways to read a point",
+      "note": "trigger=\"axis\" lists every series at the category, sorted here by value; \"item\" shows only the one under the pointer; \"none\" leaves the reading to the legend values.",
+      "language": "tsx",
+      "source": "<Chart {...channels} tooltip={{ sort: 'desc' }} trigger=\"axis\" />;\n<Chart {...channels} trigger=\"item\" />;\n<Chart {...channels} legendValues trigger=\"none\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tooltip-custom",
+      "title": "A tooltip of your own",
+      "note": "renderTooltip replaces the content and keeps the box, the placement and the dock: this one says the change against the previous month in the tone of its sign.",
+      "language": "tsx",
+      "source": "<Chart\n  {...revenue}\n  renderTooltip={(context, model) => <MonthOverMonth context={context} model={model} />}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "selection",
+      "title": "Choosing a point",
+      "note": "selectable makes a click or Enter pin a point; the others dim, and the selection is a value the page can use to filter the table below it.",
+      "language": "tsx",
+      "source": "const [selected, setSelected] = useState<ChartPoint | null>(null);\n\n<Chart {...revenue} onSelectionChange={setSelected} selectable selection={selected} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "zoom",
+      "title": "Zooming a long range",
+      "note": "Drag across the plot, wheel with Ctrl, or press + and − with the plot focused; 0 or the reset control gives the whole range back.",
+      "language": "tsx",
+      "source": "<Chart {...daily} defaultZoom={{ start: 0.35, end: 0.7 }} zoomable />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sync",
+      "title": "Charts that move together",
+      "note": "Two charts share one active point through the controlled value: the pointer on either draws the crosshair on both.",
+      "language": "tsx",
+      "source": "const [point, setPoint] = useState<ChartPoint | null>(null);\n\n<Chart {...revenue} activePoint={point} onActivePointChange={setPoint} />;\n<Chart {...orders} activePoint={point} onActivePointChange={setPoint} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Three heights",
+      "note": "sm is 192 pixels of plot for a dashboard tile, md 256 for a page section, lg 384 for the chart a page is about. The width is always the container’s.",
+      "language": "tsx",
+      "source": "<Chart {...revenue} size=\"sm\" />;\n<Chart {...revenue} size=\"md\" />;\n<Chart {...revenue} size=\"lg\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "many-series",
+      "title": "More series than slots",
+      "note": "Eleven channels over eight colour slots: the first eight take the palette, the rest take the overflow neutral, and the legend says which is which.",
+      "language": "tsx",
+      "source": "<Chart {...elevenChannels} title=\"Onze canais\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "large-data",
+      "title": "Twelve thousand samples",
+      "note": "Latency sampled every second: the renderer switches to canvas, the line is downsampled for the screen, and the table still holds every value.",
+      "language": "tsx",
+      "source": "<Chart {...latency} renderer=\"auto\" sampling=\"auto\" zoomable />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "gaps",
+      "title": "Missing values stay missing",
+      "note": "A null breaks the line on the left; connectNulls bridges it on the right, for a series where the gap is a sampling artefact rather than a fact.",
+      "language": "tsx",
+      "source": "const revenue: ChartSeries = {\n  kind: 'line',\n  field: 'revenue',\n  label: 'Receita',\n  connectNulls: true,\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "negative",
+      "title": "Values below zero",
+      "note": "Monthly result with its exchange component: a stack splits by sign, so losses hang from the baseline and gains grow from it.",
+      "language": "tsx",
+      "source": "const series: ChartSeries[] = [\n  { kind: 'bar', field: 'operating', label: 'Operacional', stack: 'r' },\n  { kind: 'bar', field: 'fx', label: 'Câmbio', stack: 'r', tone: 'warning' },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-labels",
+      "title": "Content the family did not choose",
+      "note": "A title of fifteen words, category names of seven, a series named with markup: the title wraps, names on the axis and in the legend truncate with the whole name kept, and markup is text, never HTML.",
+      "language": "tsx",
+      "source": "<Chart {...segments} title={longTitle} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "texture",
+      "title": "Texture as a second channel",
+      "note": "texture adds a pattern per slot, so a series is told apart in print, in greyscale or by a reader who does not see the difference between two hues.",
+      "language": "tsx",
+      "source": "<Chart {...orders} texture />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Waiting, in the shape of what is coming",
+      "note": "The skeleton is the kind being loaded — bars, a line, a ring — over axis lines, in the plot’s own box, with one line of legend: nothing moves when the data arrives.",
+      "language": "tsx",
+      "source": "<Chart {...orders} loading={query.isPending} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Nothing to show",
+      "note": "An empty series renders a message in the same box the drawing would take, never a blank plot and never an axis with nothing on it.",
+      "language": "tsx",
+      "source": "<Chart data={[]} series={revenueSeries} title=\"Receita\" x={{ field: 'month' }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "all-hidden",
+      "title": "Every series hidden",
+      "note": "Hiding the last series is allowed and says so, with “Show all” to undo it; the legend stays, so each series can come back one by one.",
+      "language": "tsx",
+      "source": "<Chart {...channels} defaultHidden={['c0', 'c1', 'c2']} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "error",
+      "title": "The data did not arrive",
+      "note": "error replaces the drawing with a message and, when onRetry is given, the action that asks again; the header and the box stay where they were.",
+      "language": "tsx",
+      "source": "<Chart {...revenue} error={query.isError} onRetry={() => query.refetch()} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "dashboard",
+      "title": "A row of tiles",
+      "note": "Four cards in one row: with and without a description, loading, a donut, eight series. Every tile is one height and every plot starts on one line.",
+      "language": "tsx",
+      "source": "<Grid columns={4} gap={4}>\n  <Chart {...revenue} description=\"Últimos 12 meses\" size=\"sm\" variant=\"card\" />\n  <Chart {...orders} loading size=\"sm\" variant=\"card\" />\n</Grid>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "card",
+      "title": "On the page, or as a card",
+      "note": "plain sits on the page’s own surface for a report; card draws its own surface, border and padding, and fills the grid cell it is given.",
+      "language": "tsx",
+      "source": "<Chart {...revenue} variant=\"plain\" />;\n<Chart {...revenue} variant=\"card\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "toolbar",
+      "title": "The controls, and when to show them",
+      "note": "visible keeps the toolbar in view; hover shows it on pointer or focus inside the chart; below 480 pixels only the menu remains and holds the rest.",
+      "language": "tsx",
+      "source": "<Chart {...daily} toolbar=\"visible\" zoomable />;\n<Chart {...daily} toolbar=\"hover\" />;\n<Chart {...daily} toolbar=\"none\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fullscreen",
+      "title": "The whole screen",
+      "note": "The full-screen control takes the viewport with the browser’s own API; Escape or the same control gives the tile its place back, and the page scrolls to where it was.",
+      "language": "tsx",
+      "source": "const [full, setFull] = useState(false);\n\n<Chart {...revenue} fullscreen={full} onFullscreenChange={setFull} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "palette",
+      "title": "Colour from the design system",
+      "note": "categorical tells series apart, sequential orders them by one hue for ranked data, focus draws the first series in colour and the rest in neutral. slot and tone pin a series to a colour.",
+      "language": "tsx",
+      "source": "<Chart {...channels} palette=\"categorical\" />;\n<Chart {...ranked} palette=\"sequential\" />;\n<Chart {...channels} palette=\"focus\" />;\n\nconst cost: ChartSeries = { kind: 'line', field: 'cost', label: 'Custo', slot: 5 };\nconst target: ChartSeries = { kind: 'line', field: 'target', label: 'Meta', tone: 'neutral' };\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "help",
+      "title": "A note behind the title",
+      "note": "help puts an information control beside the title; its note opens on click or Enter, anchored to it, and closes on Escape or outside.",
+      "language": "tsx",
+      "source": "<Chart {...revenue} help=\"Receita reconhecida no mês, sem impostos. Atualizada às 6h.\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "table",
+      "title": "The same data as a table",
+      "note": "The table view opens inside the plot’s box so a card keeps its height; CSV and image downloads sit in the menu, and actions composes the consumer’s own.",
+      "language": "tsx",
+      "source": "<Chart {...revenue} actions={<PeriodPicker />} defaultTableOpen />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "The plot is one tab stop named by the title and described by a generated summary; arrows walk the points, and the live region says the last one reached, not each one passed.",
+      "language": "tsx",
+      "source": "<SlottedProvider locale=\"pt-BR\" catalogs={{ 'pt-BR': PT_BR }}>\n  <App />\n</SlottedProvider>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}