@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/chart.json

@@ -0,0 +1,1359 @@
+{
+  "family": "chart",
+  "ui": "chart",
+  "binding": "angular",
+  "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 { SlChart, SlChartTooltip, provideChartDefaults, preloadChartEngine } from '@slotted/angular/chart';",
+        "selector": "figure[slChart]",
+        "exportAs": "slChart"
+      },
+      "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 a slChartCenter template."
+        },
+        {
+          "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 the retry action that emits retry."
+        },
+        {
+          "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": "slChart",
+          "description": "One record per category or per point. Fields are named by x and by each series"
+        },
+        {
+          "name": "series",
+          "type": "readonly ChartSeries[]",
+          "defaultValue": "[]",
+          "appliesTo": "slChart",
+          "description": "What is drawn: kind, field, label, and how. Order is legend order and colour order"
+        },
+        {
+          "name": "x",
+          "type": "ChartXAxis",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The category field, and its type (category, time, value), label, format and extent"
+        },
+        {
+          "name": "y",
+          "type": "ChartYAxis | [ChartYAxis, ChartYAxis]",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "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": "slChart",
+          "description": "Which way categories run. Horizontal bars for a ranking with long names"
+        },
+        {
+          "name": "stackMode",
+          "type": "'normal' | 'percent'",
+          "defaultValue": "normal",
+          "appliesTo": "slChart",
+          "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": "slChart",
+          "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": "slChart",
+          "description": "The field that names a record when x is a value axis, for points and selection"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "BCP 47, for every number and date; the language in force when absent"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The caption, and the plot’s accessible name. Taken from the native title attribute, which the figure does not keep"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "One line under the title"
+        },
+        {
+          "name": "help",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "A note behind an information control beside the title"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ChartMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "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": "slChart",
+          "description": "The plot height: 192, 256 or 384 pixels"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'card'",
+          "defaultValue": "plain",
+          "appliesTo": "slChart",
+          "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": "slChart",
+          "description": "Which ramp the eight slots take"
+        },
+        {
+          "name": "toolbar",
+          "type": "'visible' | 'hover' | 'none'",
+          "defaultValue": "visible",
+          "appliesTo": "slChart",
+          "description": "When the toolbar shows: always, on hover or focus within, or never"
+        },
+        {
+          "name": "grid",
+          "type": "'horizontal' | 'vertical' | 'both' | 'none'",
+          "defaultValue": "horizontal",
+          "appliesTo": "slChart",
+          "description": "Which grid lines are drawn"
+        },
+        {
+          "name": "texture",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "A pattern per slot, as a second channel beside colour"
+        },
+        {
+          "name": "renderer",
+          "type": "'auto' | 'svg' | 'canvas'",
+          "defaultValue": "auto",
+          "appliesTo": "slChart",
+          "description": "SVG, or canvas past a few thousand points"
+        },
+        {
+          "name": "sampling",
+          "type": "'auto' | 'none'",
+          "defaultValue": "auto",
+          "appliesTo": "slChart",
+          "description": "Downsamples a long line for the screen; the table keeps every value"
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slChart",
+          "description": "Transitions; off under reduced motion regardless"
+        },
+        {
+          "name": "legend",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slChart",
+          "description": "Whether the legend is drawn"
+        },
+        {
+          "name": "legendInteractive",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slChart",
+          "description": "Legend items as toggles, or as a static key"
+        },
+        {
+          "name": "legendValues",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "Each item’s value at the active point, or its last"
+        },
+        {
+          "name": "legendOverflow",
+          "type": "'collapse' | 'wrap'",
+          "defaultValue": "collapse",
+          "appliesTo": "slChart",
+          "description": "One line and +N, or as many lines as it takes"
+        },
+        {
+          "name": "trigger",
+          "type": "'axis' | 'item' | 'none'",
+          "defaultValue": "axis",
+          "appliesTo": "slChart",
+          "description": "What the tooltip reads: the category, the point, or nothing. item for pie and scatter"
+        },
+        {
+          "name": "tooltip",
+          "type": "ChartTooltipSettings",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "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": "slChart",
+          "description": "Drag, Ctrl+wheel and + − 0 zoom the x axis"
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "A click or Enter selects a point"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "The skeleton of the kind being loaded, in the plot’s box"
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "The data did not arrive"
+        },
+        {
+          "name": "hidden",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "slChart",
+          "description": "The series ids the legend hides; bind [(hidden)] to own it"
+        },
+        {
+          "name": "activePoint",
+          "type": "model<ChartPoint | null>",
+          "defaultValue": "null",
+          "appliesTo": "slChart",
+          "description": "The point being read; bind [(activePoint)] to share it between charts"
+        },
+        {
+          "name": "selection",
+          "type": "model<ChartPoint | null>",
+          "defaultValue": "null",
+          "appliesTo": "slChart",
+          "description": "The selected point"
+        },
+        {
+          "name": "zoom",
+          "type": "model<ChartZoom>",
+          "defaultValue": "{ start: 0, end: 1 }",
+          "appliesTo": "slChart",
+          "description": "The visible fraction of the x domain"
+        },
+        {
+          "name": "tableOpen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "Whether the plot shows the table"
+        },
+        {
+          "name": "fullscreen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slChart",
+          "description": "Whether the chart has the screen"
+        }
+      ],
+      "composition": [
+        {
+          "name": "slChartTooltip",
+          "type": "ng-template, let-context let-model=\"model\"",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The tooltip’s content; the box, placement and dock stay"
+        },
+        {
+          "name": "slChartLegendItem",
+          "type": "ng-template, let-entry let-value=\"value\" let-current=\"current\"",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "One legend item’s content; the toggle and its wiring stay"
+        },
+        {
+          "name": "slChartCenter",
+          "type": "ng-template, let-model",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The middle of a donut"
+        },
+        {
+          "name": "slChartEmpty",
+          "type": "ng-template, let-reason ('no-data' | 'all-hidden')",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The empty state"
+        },
+        {
+          "name": "slChartError",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The error state"
+        },
+        {
+          "name": "slChartActions",
+          "type": "content projection",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The consumer’s own controls, before the toolbar"
+        },
+        {
+          "name": "extendOption",
+          "type": "(option) => option",
+          "defaultValue": "—",
+          "appliesTo": "slChart",
+          "description": "The engine’s option before it is drawn: the escape hatch for what the contract does not say"
+        },
+        {
+          "name": "#chart=\"slChart\"",
+          "type": "SlChart",
+          "defaultValue": "—",
+          "appliesTo": "Template",
+          "description": "focus(), resetZoom(), toDataURL() and toCsv()"
+        },
+        {
+          "name": "provideChartDefaults",
+          "type": "ChartDefaults",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "size, variant, palette, toolbar, renderer, grid, legendOverflow, tooltip and animate, once; an input still wins"
+        },
+        {
+          "name": "CHART_ENGINE",
+          "type": "InjectionToken",
+          "defaultValue": "mountChartEngine",
+          "appliesTo": "Application",
+          "description": "The engine the chart mounts; a test provides a recording one"
+        },
+        {
+          "name": "preloadChartEngine",
+          "type": "(kinds?: ChartKind[]) => Promise<void>",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Fetches the engine chunks ahead of the first chart, in a route resolver"
+        }
+      ],
+      "events": [
+        {
+          "name": "hiddenChange, hiddenChangeRequest",
+          "payload": "readonly string[], ChangeRequest<readonly string[]>",
+          "when": "The request before a series is hidden or shown from the legend, from “Show all”, or isolated with Shift; the model change after it commits. Reasons: pointer, keyboard, programmatic. cancel() refuses it."
+        },
+        {
+          "name": "activePointChange, activePointChangeRequest",
+          "payload": "ChartPoint | null, 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": "selectionChange, selectionChangeRequest",
+          "payload": "ChartPoint | null, ChangeRequest<ChartPoint | null>",
+          "when": "With selectable, on a click or Enter on a point, and on Escape: pointer, keyboard, escape, programmatic."
+        },
+        {
+          "name": "zoomChange, zoomChangeRequest",
+          "payload": "ChartZoom, ChangeRequest<ChartZoom>",
+          "when": "With zoomable, on a drag, a wheel with Ctrl, + or −, 0 or the reset control: pointer, keyboard, clear, escape, programmatic."
+        },
+        {
+          "name": "tableOpenChange, tableOpenChangeRequest",
+          "payload": "boolean, ChangeRequest<boolean>",
+          "when": "Before the plot switches between the drawing and the table: pointer, keyboard, escape, programmatic."
+        },
+        {
+          "name": "fullscreenChange, fullscreenChangeRequest",
+          "payload": "boolean, 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": "retry",
+          "payload": "void",
+          "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": "html",
+      "source": "<figure\n  slChart\n  title=\"Receita\"\n  [data]=\"monthly\"\n  [series]=\"revenue\"\n  [x]=\"{ field: 'month' }\"\n></figure>\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": "html",
+      "source": "<figure slChart title=\"Receita e custo\" [data]=\"monthly\" [series]=\"series\" [x]=\"x\" [y]=\"y\"></figure>\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": "html",
+      "source": "<figure slChart title=\"Sessões por canal\" [data]=\"sessions\" [series]=\"stackedAreas\"></figure>\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": "html",
+      "source": "<figure slChart title=\"Pedidos por canal\" [data]=\"orders\" [series]=\"channels\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  orientation=\"horizontal\"\n  title=\"Receita por região\"\n  [data]=\"regions\"\n  [series]=\"ranking\"\n></figure>\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": "html",
+      "source": "<figure slChart title=\"Pedidos por canal\" [data]=\"orders\" [series]=\"stackedBars\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  stackMode=\"percent\"\n  title=\"Participação por canal\"\n  [data]=\"orders\"\n  [series]=\"stackedAreas\"\n></figure>\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": "html",
+      "source": "<figure slChart title=\"Receita e meta\" [data]=\"monthly\" [series]=\"barAndTarget\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Pedidos e margem\"\n  [data]=\"monthly\"\n  [series]=\"ordersAndMargin\"\n  [y]=\"[orders, margin]\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Sessões diárias\"\n  [data]=\"daily\"\n  [series]=\"sessions\"\n  [x]=\"{ field: 'day', type: 'time' }\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Usuários ativos\"\n  [data]=\"users\"\n  [series]=\"series\"\n  [y]=\"{ scale: 'log' }\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Receita por região\"\n  [data]=\"regions\"\n  [series]=\"pie\"\n  [x]=\"{ field: 'region' }\"\n></figure>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "donut",
+      "title": "A donut with the total inside",
+      "note": "innerRadius opens the middle and the center holds the total; a slChartCenter template replaces it, here with the resolution rate.",
+      "language": "html",
+      "source": "<figure slChart title=\"Tickets por estado\" [data]=\"tickets\" [series]=\"donut\">\n  <ng-template slChartCenter let-model>\n    <span data-part=\"center-value\">{{ resolved(model) }}</span>\n    <span data-part=\"center-label\">resolvidos</span>\n  </ng-template>\n</figure>\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": "html",
+      "source": "<figure\n  slChart\n  recordKey=\"id\"\n  title=\"Esforço e impacto\"\n  [data]=\"work\"\n  [series]=\"groups\"\n  [x]=\"effort\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  recordKey=\"id\"\n  title=\"Esforço, impacto e clientes\"\n  [data]=\"work\"\n  [series]=\"bubbles\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Receita contra a meta\"\n  [annotations]=\"annotations\"\n  [data]=\"monthly\"\n  [series]=\"revenue\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Canais de aquisição\"\n  [data]=\"sessions\"\n  [series]=\"channels\"\n  [(hidden)]=\"hidden\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  legendValues\n  title=\"Canais de aquisição\"\n  [data]=\"sessions\"\n  [series]=\"channels\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  trigger=\"axis\"\n  [tooltip]=\"{ sort: 'desc' }\"\n  [data]=\"sessions\"\n  [series]=\"channels\"\n></figure>\n<figure slChart trigger=\"item\" [data]=\"sessions\" [series]=\"channels\"></figure>\n<figure slChart legendValues trigger=\"none\" [data]=\"sessions\" [series]=\"channels\"></figure>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tooltip-custom",
+      "title": "A tooltip of your own",
+      "note": "A slChartTooltip template 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": "html",
+      "source": "<figure slChart title=\"Receita mensal\" [data]=\"monthly\" [series]=\"revenue\">\n  <ng-template slChartTooltip let-context let-model=\"model\">\n    <div data-part=\"tooltip-title\">{{ context.title }}</div>\n    <div data-part=\"tooltip-item\">{{ change(context, model) }}</div>\n  </ng-template>\n</figure>\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": "html",
+      "source": "<figure\n  slChart\n  selectable\n  title=\"Receita mensal\"\n  [data]=\"monthly\"\n  [series]=\"revenue\"\n  [(selection)]=\"selected\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  zoomable\n  title=\"Sessões diárias\"\n  [data]=\"daily\"\n  [series]=\"sessions\"\n  [(zoom)]=\"zoom\"\n></figure>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sync",
+      "title": "Charts that move together",
+      "note": "Two charts share one active point through the two-way value: the pointer on either draws the crosshair on both.",
+      "language": "html",
+      "source": "<figure\n  slChart\n  title=\"Receita\"\n  [data]=\"monthly\"\n  [series]=\"revenue\"\n  [(activePoint)]=\"point\"\n></figure>\n<figure slChart title=\"Pedidos\" [data]=\"monthly\" [series]=\"orders\" [(activePoint)]=\"point\"></figure>\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": "html",
+      "source": "<figure slChart size=\"sm\" [data]=\"monthly\" [series]=\"revenue\"></figure>\n<figure slChart size=\"md\" [data]=\"monthly\" [series]=\"revenue\"></figure>\n<figure slChart size=\"lg\" [data]=\"monthly\" [series]=\"revenue\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  legendOverflow=\"wrap\"\n  title=\"Onze canais\"\n  [data]=\"sessions\"\n  [series]=\"eleven\"\n></figure>\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": "html",
+      "source": "<figure\n  slChart\n  renderer=\"auto\"\n  sampling=\"auto\"\n  zoomable\n  [data]=\"latency\"\n  [series]=\"series\"\n></figure>\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": "html",
+      "source": "<figure slChart title=\"Lacunas\" [data]=\"withGaps\" [series]=\"broken\"></figure>\n<figure slChart title=\"Lacunas ligadas\" [data]=\"withGaps\" [series]=\"connected\"></figure>\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": "html",
+      "source": "<figure slChart title=\"Resultado mensal\" [data]=\"result\" [series]=\"operatingAndFx\"></figure>\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": "html",
+      "source": "<figure slChart [title]=\"longTitle\" [data]=\"segments\" [series]=\"series\"></figure>\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": "html",
+      "source": "<figure slChart texture title=\"Pedidos por canal\" [data]=\"orders\" [series]=\"channels\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Pedidos por canal\"\n  [data]=\"orders()\"\n  [loading]=\"pending()\"\n  [series]=\"channels\"\n></figure>\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": "html",
+      "source": "<figure slChart title=\"Reembolsos\" [data]=\"[]\" [series]=\"refunds\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  title=\"Canais\"\n  [data]=\"sessions\"\n  [series]=\"channels\"\n  [hidden]=\"['c0', 'c1', 'c2']\"\n></figure>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "error",
+      "title": "The data did not arrive",
+      "note": "error replaces the drawing with a message and the action that asks again; the header and the box stay where they were.",
+      "language": "html",
+      "source": "<figure\n  slChart\n  title=\"Conversão\"\n  [data]=\"monthly\"\n  [error]=\"failed()\"\n  [series]=\"conversion\"\n  (retry)=\"reload()\"\n></figure>\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": "html",
+      "source": "<div slGrid [columns]=\"4\" [gap]=\"4\">\n  <figure\n    slChart\n    size=\"sm\"\n    variant=\"card\"\n    title=\"Receita\"\n    [data]=\"monthly\"\n    [series]=\"revenue\"\n  ></figure>\n  <figure slChart loading size=\"sm\" variant=\"card\" title=\"Pedidos\" [series]=\"channels\"></figure>\n</div>\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": "html",
+      "source": "<figure slChart variant=\"plain\" [data]=\"monthly\" [series]=\"revenue\"></figure>\n<figure slChart variant=\"card\" [data]=\"monthly\" [series]=\"revenue\"></figure>\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": "html",
+      "source": "<figure slChart toolbar=\"visible\" zoomable [data]=\"daily\" [series]=\"sessions\"></figure>\n<figure slChart toolbar=\"hover\" [data]=\"daily\" [series]=\"sessions\"></figure>\n<figure slChart toolbar=\"none\" [data]=\"daily\" [series]=\"sessions\"></figure>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fullscreen",
+      "title": "The whole screen",
+      "note": "The full-screen control takes the viewport; Escape or the same control gives the tile its place back. Bound two-way, the page can open it from its own button.",
+      "language": "html",
+      "source": "<figure slChart title=\"Receita\" [data]=\"monthly\" [series]=\"revenue\" [(fullscreen)]=\"presenting\">\n  <button slChartActions type=\"button\" (click)=\"presenting.set(true)\">Apresentar</button>\n</figure>\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": "html",
+      "source": "<figure slChart palette=\"categorical\" [data]=\"sessions\" [series]=\"channels\"></figure>\n<figure slChart palette=\"sequential\" [data]=\"regions\" [series]=\"ranking\"></figure>\n<figure slChart palette=\"focus\" [data]=\"sessions\" [series]=\"channels\"></figure>\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": "html",
+      "source": "<figure\n  slChart\n  help=\"Receita reconhecida no mês, sem impostos.\"\n  title=\"Receita\"\n  [data]=\"monthly\"\n  [series]=\"revenue\"\n></figure>\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 slChartActions projects the consumer’s own controls.",
+      "language": "html",
+      "source": "<figure slChart title=\"Receita e custo\" [data]=\"monthly\" [series]=\"series\" [(tableOpen)]=\"asTable\">\n  <button slChartActions type=\"button\">12 meses</button>\n</figure>\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": "ts",
+      "source": "provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } });\n",
+      "verdict": "excerpt"
+    }
+  ]
+}