@skdx/web-components-charts 0.38.0

package/dist/index-oF5ss8v9.d.ts

@@ -0,0 +1,2331 @@
+import * as lit from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+
+/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */
+declare class SkdxBarChart extends SkdxChartElement {
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-bar-chart': SkdxBarChart;
+    }
+}
+
+/** One polyline per series with a dot per value; series may also be bars, areas or ranges. */
+declare class SkdxLineChart extends SkdxChartElement {
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-line-chart': SkdxLineChart;
+    }
+}
+
+/** A plotted value; `null` (or `NaN`) is a gap. */
+type Value = number | null;
+/** A stable identifier of a series, datum, node, link or feature; defaults to the item's name. */
+type ChartItemId = string | number;
+/**
+ * Locates one item, or a set of items, across a chart: every field given must match. `{ series }`
+ * is a whole series, `{ series, index }` one point, `{ id }` one datum/node/feature/link.
+ * Ids fall back to names, so `{ id: 'EMEA' }` finds a slice named EMEA that has no explicit id.
+ */
+interface ChartItemRef {
+    id?: ChartItemId | undefined;
+    series?: ChartItemId | undefined;
+    index?: number | undefined;
+    category?: string | undefined;
+}
+/** A selection: refs, or bare ids as `{ id }` sugar (`selected="EMEA"` selects the EMEA item). */
+type Selection = ChartItemId | ChartItemRef | (ChartItemId | ChartItemRef)[];
+/** Common identity and annotation metadata a datum-like object may carry. */
+interface Identified {
+    /** Stable identifier used by selection, highlighting, events and tests. @default the name */
+    id?: ChartItemId | undefined;
+}
+/** One plotted series: a name for the legend/title and a value per category. */
+interface Series extends Identified {
+    name: string;
+    data: Value[];
+    /** Any CSS color; defaults to the next `@skdx/tokens` series color. */
+    color?: string | undefined;
+}
+/** One named value, for the part-of-whole charts (pie, funnel, radial bar). */
+interface Datum extends Identified {
+    name: string;
+    value: number;
+    color?: string | undefined;
+}
+/**
+ * How values are written: a function, or a named `Intl` style. `percent` expects fractions
+ * (0.25 → 25%), `duration` expects seconds, the date styles expect epoch milliseconds.
+ */
+type Format = ((value: number) => string) | {
+    style: 'integer' | 'decimal' | 'percent' | 'currency' | 'compact' | 'scientific' | 'date' | 'time' | 'datetime' | 'duration';
+    /** BCP-47 locale; defaults to the runtime locale. */
+    locale?: string | undefined;
+    /** ISO 4217 code for `currency`. @default 'USD' */
+    currency?: string | undefined;
+    /** Fraction digits for the number styles. */
+    digits?: number | undefined;
+    /** Suffix written after the number, e.g. ` ms`. */
+    unit?: string | undefined;
+    /** IANA time zone for the date styles, e.g. `'UTC'`; defaults to the runtime zone. */
+    timeZone?: string | undefined;
+};
+/** Semantic color of a reference line or band. */
+type Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+/** Tooltip behaviour; `true`/`false` is shorthand for `{ enabled }`. */
+interface TooltipOptions {
+    /** @default true */
+    enabled?: boolean | undefined;
+    /**
+     * `item` shows the mark under the pointer; `axis` snaps to the nearest category and lists every
+     * series there (cartesian and candlestick charts; the same as `crosshair`). @default 'item'
+     */
+    trigger?: 'item' | 'axis' | undefined;
+    /** Replaces the tooltip text of a mark: one string, or one line per string. */
+    formatter?: ((item: ChartItem) => string | string[]) | undefined;
+    /** Rewrites the shared axis tooltip: the category line, then one line per series. */
+    axisFormatter?: ((rows: string[], index: number) => string[]) | undefined;
+    /**
+     * Render the tooltip as an HTML element positioned over the page instead of inside the svg,
+     * so it can escape a clipped or scaled container. @default false
+     */
+    portal?: boolean | undefined;
+    /** Where the box sits relative to its anchor; `auto` keeps it inside the canvas. @default 'auto' */
+    placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /** Anchor the box to the pointer (`true`) or to the hovered mark (`false`). @default true */
+    followPointer?: boolean | undefined;
+}
+/** Legend layout; `true`/`false` is shorthand for `{ enabled }`. */
+interface LegendOptions {
+    /** @default true */
+    enabled?: boolean | undefined;
+    /** Above, below, or in a column beside the plot. @default 'top' */
+    position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /** Column width for `left`/`right`, in pixels. @default 120 */
+    width?: number | undefined;
+    /** Clicking or pressing Enter on an entry hides its series. @default true */
+    interactive?: boolean | undefined;
+    /** Entries beyond this many are summarized as `+N more`. */
+    maxItems?: number | undefined;
+    /** Rewrites an entry's text. */
+    formatter?: ((name: string) => string) | undefined;
+    /** Row alignment; `end` right-aligns (the default under `direction: 'rtl'`). @default 'start' */
+    align?: 'start' | 'end' | undefined;
+}
+/** Which marks stay full-strength while one is highlighted, and which fade. */
+interface HighlightScope {
+    /** Keep the highlighted item only, or its whole series. @default 'item' */
+    highlighted?: 'item' | 'series' | undefined;
+    /** Fade nothing, the rest of the item's series, or every other mark. @default 'global' */
+    faded?: 'none' | 'series' | 'global' | undefined;
+}
+/** Opt-in tabular fallback rendered next to the svg for screen readers. */
+interface AccessibleTableOptions {
+    /** Above this many rows a one-line summary is rendered instead of the table. @default 500 */
+    maxRows?: number | undefined;
+    /** Table caption. @default the chart label */
+    caption?: string | undefined;
+}
+/** A data problem found while laying out; reported through `onDataIssue`. */
+interface ChartDataIssue {
+    /** Machine-readable, e.g. `invalid-value`, `cycle`, `duplicate-id`, `unknown-node`. */
+    code: string;
+    severity: 'warning' | 'error';
+    message: string;
+    itemId?: ChartItemId | undefined;
+}
+interface Sized {
+    /** @default 600 (300 for the round charts, 120 for sparklines) */
+    width?: number | undefined;
+    /** @default 300 (32 for sparklines) */
+    height?: number | undefined;
+    /** Draw a legend row above (or, with `{ position: 'bottom' }`, below) the plot. @default false */
+    legend?: boolean | LegendOptions | undefined;
+    /** Show a hover tooltip for the mark under the pointer; an object configures it. @default true */
+    tooltip?: boolean | TooltipOptions | undefined;
+    /** How values are written in ticks, labels and tooltips. @default the runtime locale's number format */
+    format?: Format | undefined;
+    /** Categorical series colors, cycled by series index. @default the `@skdx/tokens` scales */
+    palette?: string[] | undefined;
+    /** Series (by name) left out of the plot; their legend entries stay, dimmed. */
+    hiddenSeries?: string[] | undefined;
+    /**
+     * Selected items, outlined in the focus color. Part-of-whole and graph charts also give the
+     * selection a chart-specific meaning (a pulled-out slice, a lit neighbourhood).
+     */
+    selected?: Selection | undefined;
+    /** The item(s) under emphasis: everything outside `highlightScope` fades. `null` clears it. */
+    highlighted?: ChartItemRef | ChartItemId | (ChartItemRef | ChartItemId)[] | null | undefined;
+    highlightScope?: HighlightScope | undefined;
+    /** Draw a loading placeholder instead of the chart. @default false */
+    loading?: boolean | undefined;
+    /** Draw this message instead of the chart. */
+    error?: string | undefined;
+    /** Written in place of an empty chart. @default 'No data available' */
+    emptyMessage?: string | undefined;
+    /** Longer accessible description, rendered as the svg `<desc>`. */
+    description?: string | undefined;
+    /** Hide the chart from assistive technology, for charts that repeat adjacent text. @default false */
+    decorative?: boolean | undefined;
+    /** Render a visually hidden data table next to the svg. @default false */
+    accessibleTable?: boolean | AccessibleTableOptions | undefined;
+    /**
+     * Fade marks in on mount and transition them on data changes; `true` is 300 ms, a number sets
+     * the duration. Off under `prefers-reduced-motion` and above 1500 shapes. @default false
+     */
+    animate?: boolean | number | undefined;
+    /**
+     * Measure the container and lay the chart out at that width, so text keeps its size. An object
+     * also swaps in `compact` overrides below `breakpoint` pixels (default 480). @default false
+     */
+    responsive?: boolean | ResponsiveOptions | undefined;
+    /** Text direction; `rtl` right-aligns the legend and mirrors category axes. @default 'ltr' */
+    direction?: 'ltr' | 'rtl' | undefined;
+}
+interface ResponsiveOptions {
+    /** @default 480 */
+    breakpoint?: number | undefined;
+    /** Input overrides applied while the measured width is below `breakpoint`, e.g. `{ legend: false, labels: false }`. */
+    compact?: Record<string, unknown> | undefined;
+}
+/** `smooth` is an alias of `monotone`: a cubic through every point that never overshoots. */
+type Curve = 'linear' | 'monotone' | 'smooth' | 'step' | 'stepBefore' | 'stepAfter';
+/** A horizontal or vertical line, or a shaded band, drawn behind the marks in data coordinates. */
+type Reference = {
+    label?: string | undefined;
+    /** @default 'neutral' */
+    variant?: Variant | undefined;
+    /** Any CSS color; wins over `variant`. */
+    color?: string | undefined;
+} & ({
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    x: number | string | Date;
+} | {
+    y1: number;
+    y2: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    x1: number | string | Date;
+    x2: number | string | Date;
+});
+interface AnnotationBase extends Identified {
+    label?: string | undefined;
+    /** @default 'neutral' */
+    variant?: Variant | undefined;
+    /** Any CSS color; wins over `variant`. */
+    color?: string | undefined;
+}
+/**
+ * Marks in data coordinates drawn over the plot: lines and bands (as `references`), a point or
+ * callout at `(x, y)`, free text, or a rectangle. `x` values name a category, number or date.
+ */
+type Annotation = AnnotationBase & ({
+    type: 'line';
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    type: 'line';
+    x: number | string | Date;
+} | {
+    type: 'band';
+    y1: number;
+    y2: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    type: 'band';
+    x1: number | string | Date;
+    x2: number | string | Date;
+} | {
+    type: 'point';
+    x: number | string | Date;
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    type: 'callout';
+    x: number | string | Date;
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+    /** Pixel offset of the text from the point. @default [16, -16] */
+    offset?: [number, number] | undefined;
+} | {
+    type: 'text';
+    x: number | string | Date;
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+    text: string;
+} | {
+    type: 'rect';
+    x1: number | string | Date;
+    x2: number | string | Date;
+    y1: number;
+    y2: number;
+    axis?: 'left' | 'right' | undefined;
+});
+interface AxisOptions {
+    /** Identifies the axis so a series can pick it with `axis: id`. */
+    id?: string | undefined;
+    /**
+     * Which side a value axis is drawn on; extra axes stack outward. Horizontal charts draw
+     * `'left'`/`'bottom'` axes along the bottom and `'right'`/`'top'` axes along the top.
+     * @default 'left' (first), 'right' (second)
+     */
+    position?: 'left' | 'right' | 'top' | 'bottom' | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    /** @default 'linear' */
+    scale?: 'linear' | 'log' | 'sqrt' | undefined;
+    /** Overrides the chart-level `format` for this axis. */
+    format?: Format | undefined;
+    /** Axis title. */
+    label?: string | undefined;
+    /** Approximate tick count. @default 5 */
+    ticks?: number | undefined;
+    /** Draw grid lines at the ticks. @default true */
+    grid?: boolean | undefined;
+    /** Run the axis the other way (largest value at the origin). @default false */
+    reversed?: boolean | undefined;
+    /** Round the domain out to nice tick values; `false` keeps the exact data extent. @default true */
+    nice?: boolean | undefined;
+    /** Draw the axis line. @default true for the baseline */
+    showLine?: boolean | undefined;
+    /** Draw tick marks at the ticks. @default false */
+    showTicks?: boolean | undefined;
+    /** Tick mark length in pixels. @default 4 */
+    tickSize?: number | undefined;
+    /** Tick label rotation in degrees (category axes), e.g. `-45` for long labels. @default 0 */
+    tickRotation?: number | undefined;
+}
+interface XAxisOptions extends Pick<AxisOptions, 'format' | 'label' | 'grid' | 'showLine' | 'showTicks' | 'tickSize' | 'tickRotation'> {
+    /** Fixed category order and membership; categories not listed are dropped, missing ones are empty. */
+    domain?: Category[] | undefined;
+    /**
+     * `category` spaces points evenly; `time` and `linear` place numeric or date categories
+     * proportionally, so irregular timestamps land where they belong. Under `time`, ISO 8601
+     * strings are accepted as categories. @default 'category'
+     */
+    type?: 'category' | 'time' | 'linear' | undefined;
+}
+/** A visible window over the categories: indexes `[start, end)`. */
+interface Zoom {
+    start: number;
+    end: number;
+}
+/** An uncertainty around a value: a symmetric `±e`, or an absolute `[low, high]` pair. */
+type ErrorValue = number | [number, number] | null;
+/**
+ * A pure, deterministic step applied to a series' values in order. `movingAverage` leaves the
+ * first `window - 1` values as gaps; `difference` and `percentageChange` leave the first one.
+ */
+type SeriesTransform = {
+    type: 'cumulative';
+} | {
+    type: 'difference';
+} | {
+    type: 'percentageChange';
+} | {
+    type: 'movingAverage';
+    window: number;
+} | {
+    type: 'normalize';
+    to?: 'max' | 'sum' | undefined;
+} | {
+    type: 'rank';
+    order?: 'asc' | 'desc' | undefined;
+} | {
+    type: 'filter';
+    min?: number | undefined;
+    max?: number | undefined;
+}
+/** Orders the values (and, at chart level, the categories with them). */
+ | {
+    type: 'sort';
+    order?: 'asc' | 'desc' | undefined;
+}
+/** Folds every `every` consecutive values into one. */
+ | {
+    type: 'aggregate';
+    every: number;
+    method?: 'sum' | 'mean' | 'min' | 'max' | undefined;
+}
+/** Bins the values into counts (chart level: categories become bin labels). */
+ | {
+    type: 'bin';
+    bins?: number | undefined;
+    binWidth?: number | undefined;
+    domain?: [number, number] | undefined;
+};
+/**
+ * Point reduction for dense line and area series. `auto` samples above 2000 visible points with
+ * LTTB; `minmax` keeps the extremes of each bucket; `none` draws everything. Sampled charts keep
+ * their original point indexes in items and tooltips.
+ */
+type Sampling = 'none' | 'auto' | 'lttb' | 'minmax' | 'm4' | {
+    strategy: 'lttb' | 'minmax' | 'm4';
+    threshold?: number | undefined;
+};
+/** A bar, line or area series inside a cartesian chart. */
+interface CartesianSeries extends Series {
+    /** Defaults to the chart's own type: bars in a BarChart, lines in a LineChart, areas in an AreaChart. */
+    type?: 'bar' | 'line' | 'area' | undefined;
+    /** Which y axis the values are measured on: a side, or the `id` of an axis in `yAxis`. @default 'left' */
+    axis?: 'left' | 'right' | (string & {}) | undefined;
+    /** Overrides the chart-level curve for this line or area. */
+    curve?: Curve | undefined;
+    /** SVG dash pattern, e.g. `'4 3'`, for a line or area outline. */
+    dash?: string | undefined;
+    /** Area fill opacity, 0–1. @default 0.25 */
+    fillOpacity?: number | undefined;
+    /** Fade the area fill from `fillOpacity` at the line to transparent at the baseline. @default false */
+    gradient?: boolean | undefined;
+    /** Dots on line and area points. @default true up to 100 points, then off */
+    markers?: boolean | undefined;
+    /** Marker shape of a line or area series. @default 'circle' */
+    symbol?: MarkerSymbol | undefined;
+    /** Marker radius in pixels. @default 3 */
+    markerSize?: number | undefined;
+    /** Stack with the other series that share the same group; `true` is the default group. */
+    stack?: boolean | string | undefined;
+    /** Error bars per point: `±e` or `[low, high]`, drawn as whiskers on bars, lines and areas. */
+    errors?: ErrorValue[] | undefined;
+    /** Transforms applied to this series after the chart-level ones. */
+    transforms?: SeriesTransform[] | undefined;
+}
+/** A shaded band between two series of values, e.g. a forecast interval. */
+interface RangeSeries extends Identified {
+    type: 'range';
+    name: string;
+    low: Value[];
+    high: Value[];
+    color?: string | undefined;
+    axis?: 'left' | 'right' | (string & {}) | undefined;
+    curve?: Curve | undefined;
+    /** A shaded band, floating bars from low to high, or two outlines. @default 'area' */
+    style?: 'area' | 'bar' | 'line' | undefined;
+}
+type Category = string | number | Date;
+/** A scatter point: an `[x, y]` pair, an `[x, y, size]` triple, or an object with an optional label. */
+type ScatterPoint = [number, number] | [number, number, number] | (Identified & {
+    x: number;
+    y: number;
+    size?: number | undefined;
+    label?: string | undefined;
+    /** Any CSS color for this point; wins over the series color and `colorScale`. */
+    color?: string | undefined;
+    /** The quantity `colorScale` maps to a color. */
+    value?: number | undefined;
+});
+/** Marker shape of a scatter series, so series are told apart by more than color. */
+type MarkerSymbol = 'circle' | 'square' | 'diamond' | 'triangle';
+interface ScatterSeries extends Identified {
+    name: string;
+    /** `[x, y]` pairs, `[x, y, size]` triples for bubbles, or `{ x, y, size?, label? }` objects. */
+    data: ScatterPoint[];
+    color?: string | undefined;
+    /** @default 'circle' */
+    symbol?: MarkerSymbol | undefined;
+}
+/** Where a colour legend sits. */
+interface ColorLegendOptions {
+    /** @default 'horizontal' (under the plot); `vertical` is a column at the right */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    title?: string | undefined;
+}
+/** A bubble: two positions and a magnitude the bubble's area follows. */
+interface BubblePoint extends Identified {
+    x: number;
+    y: number;
+    /** Magnitude; the bubble's area, not its radius, is proportional to it. Negatives count as zero. */
+    z: number;
+    label?: string | undefined;
+    color?: string | undefined;
+    /** The quantity `colorScale` maps to a color. @default z */
+    value?: number | undefined;
+}
+interface BubbleSeries extends Identified {
+    name: string;
+    data: BubblePoint[];
+    color?: string | undefined;
+}
+/** A qualitative sector of a gauge or bullet scale. */
+interface Band {
+    from: number;
+    to: number;
+    variant?: Variant | undefined;
+    color?: string | undefined;
+    label?: string | undefined;
+}
+interface BulletDatum extends Identified {
+    name: string;
+    /** The measure. */
+    value: number;
+    target?: number | undefined;
+    /** Qualitative upper bounds, ascending, e.g. `[50, 75, 100]` for poor / acceptable / good; overrides the chart-level `ranges`. */
+    ranges?: (number | Band)[] | undefined;
+    color?: string | undefined;
+}
+/** A combo series must say what it is: a bar, line, area or range. */
+type ComboSeries = (CartesianSeries & {
+    type: 'bar' | 'line' | 'area';
+}) | RangeSeries;
+interface RangeChartSeries extends Identified {
+    name: string;
+    low: Value[];
+    high: Value[];
+    color?: string | undefined;
+    axis?: 'left' | 'right' | undefined;
+    curve?: Curve | undefined;
+}
+/** A category with a start and an end value, joined by a connector: before/after, plan/actual. */
+interface DumbbellDatum extends Identified {
+    name: string;
+    start: Value;
+    end: Value;
+    color?: string | undefined;
+}
+/** One Marimekko column: its width follows `total` (or the sum of its segments), segments stack to 100%. */
+interface MarimekkoCategory extends Identified {
+    name: string;
+    /** Segment values; keyed by the `segments` names in order. */
+    values: Value[];
+    /** Column width measure. @default the sum of `values` */
+    total?: number | undefined;
+}
+interface MarimekkoChartInput extends Sized {
+    /** Segment names, in stacking order; one color each. */
+    segments: (string | Pick<Datum, 'id' | 'name' | 'color'>)[];
+    data: MarimekkoCategory[];
+    /** Write segment shares inside cells wide enough. @default false */
+    labels?: boolean | undefined;
+    /** Gap between columns as a share of the plot width. @default 0.01 */
+    gap?: number | undefined;
+    /** How the column widths (totals) are written in tooltips and the x axis. */
+    xAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
+}
+/** One axis of a parallel-coordinates chart. */
+interface ParallelDimension extends Identified {
+    /** Key in each row's values, and the axis title unless `label` is set. */
+    key: string;
+    label?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    format?: Format | undefined;
+    /** Run the axis top-down. @default false */
+    reversed?: boolean | undefined;
+}
+interface ParallelRow extends Identified {
+    name: string;
+    values: Record<string, Value>;
+    color?: string | undefined;
+    /** Category, for color and the legend. */
+    group?: string | undefined;
+}
+interface ParallelCoordinatesInput extends Sized {
+    dimensions: ParallelDimension[];
+    data: ParallelRow[];
+    /** Line opacity. @default 0.6, lower above 200 rows */
+    opacity?: number | undefined;
+    /** @default 'linear' */
+    curve?: Curve | undefined;
+    /** Draw lines across missing values instead of breaking them. @default false */
+    connectNulls?: boolean | undefined;
+    /** Keep rows whose value on `key` lies inside `[min, max]`; the rest fade. */
+    filters?: {
+        key: string;
+        min?: number | undefined;
+        max?: number | undefined;
+    }[] | undefined;
+}
+interface NetworkNode extends Identified {
+    id: string;
+    /** @default the id */
+    label?: string | undefined;
+    /** Node weight; the node's area follows it. */
+    value?: number | undefined;
+    /** Category, for color and the legend. */
+    group?: string | undefined;
+    color?: string | undefined;
+    /** Position in data units, used by `arrange: 'manual'`. */
+    x?: number | undefined;
+    y?: number | undefined;
+}
+interface NetworkEdge extends Identified {
+    source: string;
+    target: string;
+    /** Edge weight; the stroke width follows it. */
+    value?: number | undefined;
+    label?: string | undefined;
+}
+interface TimelineEvent extends Identified {
+    date: string | number | Date;
+    label: string;
+    description?: string | undefined;
+    /** Lane the event sits on; lanes share the time axis. */
+    group?: string | undefined;
+    color?: string | undefined;
+    variant?: Variant | undefined;
+}
+interface TimelineChartInput extends Sized {
+    /** Point-in-time events, in any order. */
+    events: TimelineEvent[];
+    /** Time runs along x with labels staggered, or down y with one row per event. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /** How dates are written. @default date, or time when the events span under two days */
+    xAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
+    /** Write event labels. @default true */
+    labels?: boolean | undefined;
+}
+/** One radar axis with its own scale. */
+interface RadarMetric extends Identified {
+    label: string;
+    /** @default 0 */
+    min?: number | undefined;
+    /** @default the largest value on this axis, rounded up */
+    max?: number | undefined;
+    format?: Format | undefined;
+}
+interface CalendarCell {
+    date: string | number | Date;
+    value: number;
+}
+/** An ordinal palette, a one-way ramp, a two-way ramp around a midpoint, or exact classes. */
+type ColorScale = {
+    type: 'ordinal';
+    colors?: string[] | undefined;
+} | {
+    type: 'sequential';
+    /** @default the data extent */
+    domain?: [number, number] | undefined;
+    /** Stops, low to high; concrete colors interpolate, token colors quantize. @default one color, opacity ramp */
+    colors?: string[] | undefined;
+    /** Quantize into this many classes. */
+    steps?: number | undefined;
+    reversed?: boolean | undefined;
+} | {
+    type: 'diverging';
+    /** `[min, mid, max]`. @default symmetric around zero */
+    domain?: [number, number, number] | undefined;
+    /** `[low, high]` or `[low, mid, high]` stops. @default danger / surface / primary tokens */
+    colors?: string[] | undefined;
+    steps?: number | undefined;
+    reversed?: boolean | undefined;
+} | {
+    type: 'threshold';
+    /** Ascending class boundaries; `colors` has one more entry than `thresholds`. */
+    thresholds: number[];
+    colors: string[];
+    labels?: string[] | undefined;
+};
+interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface SankeyNode extends Identified {
+    id: string;
+    /** @default the id */
+    label?: string | undefined;
+    color?: string | undefined;
+}
+interface SankeyLink extends Identified {
+    source: string;
+    target: string;
+    value: number;
+}
+interface Candle extends Identified {
+    label: Category;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    /** Drawn as a bar in a pane under the candles when any candle has one. */
+    volume?: number | undefined;
+}
+/** A moving average over the closes, drawn as a line over the candles. */
+interface CandlestickOverlay {
+    type: 'sma' | 'ema';
+    /** Number of candles averaged. */
+    period: number;
+    color?: string | undefined;
+    /** @default `SMA 20` */
+    name?: string | undefined;
+}
+interface WaterfallDatum extends Datum {
+    /**
+     * `change` (default) is a signed delta; `subtotal` and `total` stand on zero and show the
+     * running total (`value` is ignored). `subtotal: true` is the older spelling.
+     */
+    type?: 'change' | 'subtotal' | 'total' | undefined;
+    /** A bar from zero to the running total so far, instead of a delta; `value` is ignored. */
+    subtotal?: boolean | undefined;
+}
+interface GanttTask extends Identified {
+    name: string;
+    start: number;
+    end: number;
+    color?: string | undefined;
+    /** Tasks sharing a group share a row, so one row can hold several intervals. */
+    group?: string | undefined;
+    /** Completed share, 0–1, drawn as a darker inner bar. */
+    progress?: number | undefined;
+    /** A point in time drawn as a diamond at `start`; `end` is ignored. */
+    milestone?: boolean | undefined;
+    /** Names (or ids) of tasks that must finish first; drawn as connectors. */
+    dependsOn?: ChartItemId[] | undefined;
+    /** The planned interval, drawn as a thin bar under the task. */
+    baseline?: {
+        start: number;
+        end: number;
+    } | undefined;
+    /** Id (or name) of the parent task; children are indented and the parent spans them. */
+    parent?: ChartItemId | undefined;
+}
+/** A precomputed five-number summary, instead of raw samples. */
+interface BoxSummary extends Identified {
+    name: string;
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+    outliers?: number[] | undefined;
+    mean?: number | undefined;
+    color?: string | undefined;
+}
+/** A series with one raw sample per category, for grouped boxplots (`categories` required). */
+interface GroupedBoxSeries extends Identified {
+    name: string;
+    /** `data[categoryIndex]` is that category's sample. */
+    data: Value[][];
+    color?: string | undefined;
+}
+type BoxplotSeries = Series | BoxSummary | GroupedBoxSeries;
+interface TreeNode extends Identified {
+    name: string;
+    /** Leaf size; a branch's size is the sum of its children when unset. */
+    value?: number | undefined;
+    children?: TreeNode[] | undefined;
+    color?: string | undefined;
+    /** A second line under the name, e.g. a role in an organization chart. */
+    subtitle?: string | undefined;
+}
+/** A node-link tree: one box or dot per node, links to its children. */
+interface TreeChartInput extends Sized {
+    data: TreeNode[];
+    /** Root at the top with levels going down, or root at the left. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Dots with labels beside them, or boxes holding the name (and subtitle). @default 'circle' */
+    nodeShape?: 'circle' | 'box' | undefined;
+    /** Curved, elbow (orthogonal) or straight links. @default 'curve' */
+    linkStyle?: 'curve' | 'elbow' | 'straight' | undefined;
+    /** Id (or name) of the node to show as the root: controlled drill-down. */
+    rootId?: ChartItemId | undefined;
+    /** Nodes whose children are hidden: controlled expand/collapse; collapsed nodes get a `+` mark. */
+    collapsed?: ChartItemId[] | undefined;
+    /** Deepest level drawn. */
+    maxDepth?: number | undefined;
+    /** Write node names. @default true */
+    labels?: boolean | undefined;
+    /** Dot radius, or box height, in pixels. @default 5 / 36 */
+    nodeSize?: number | undefined;
+}
+/** An organization chart: a tree of boxes with elbow links and optional subtitles. */
+type OrganizationChartInput = Omit<TreeChartInput, 'nodeShape' | 'linkStyle'>;
+/** Nested circles: each node a circle sized by value, children packed inside their parent. */
+interface CirclePackingInput extends Sized {
+    data: TreeNode[];
+    rootId?: ChartItemId | undefined;
+    maxDepth?: number | undefined;
+    /** Write names on circles wide enough. @default true */
+    labels?: boolean | undefined;
+    /** Gap between sibling circles, in pixels. @default 2 */
+    padding?: number | undefined;
+    /** Colors leaves by their value instead of by branch. */
+    colorScale?: ColorScale | undefined;
+}
+/** A rectangular sunburst: one row (or column) per depth, children inside their parent's span. */
+interface IcicleInput extends Sized {
+    data: TreeNode[];
+    /** Root row at the top with depth going down, or root column at the left. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    rootId?: ChartItemId | undefined;
+    /** Write the path to `rootId` above the cells. @default false */
+    breadcrumbs?: boolean | undefined;
+    maxDepth?: number | undefined;
+    /** Cell order inside a parent. @default 'none' (input order) */
+    sort?: 'asc' | 'desc' | 'none' | undefined;
+    /** Write names on cells wide enough. @default true */
+    labels?: boolean | undefined;
+    /** Gap between cells, in pixels. @default 1 */
+    padding?: number | undefined;
+    colorScale?: ColorScale | undefined;
+}
+/** Ranks over categories: one line per series, the top rank at the top. */
+interface BumpChartInput extends Sized {
+    /** Values per category; ranks are computed per category unless `ranked`. */
+    series: Series[];
+    categories?: Category[] | undefined;
+    /** The data are already ranks (1 = first). @default false */
+    ranked?: boolean | undefined;
+    /** Only the first `topRank` ranks are drawn; series that drop below leave the plot. */
+    topRank?: number | undefined;
+    /** @default 'monotone' */
+    curve?: Curve | undefined;
+    /** Write series names at the right end of their line. @default true */
+    labels?: boolean | undefined;
+    /** Marker radius in pixels. @default 5 */
+    markerSize?: number | undefined;
+    xAxis?: XAxisOptions | undefined;
+}
+/** A Nightingale rose: equal angular sectors whose radius follows the value. */
+interface PolarAreaChartInput extends Sized {
+    data: Datum[];
+    /** Radius proportional to the value (`linear`) or to its square root, so area is proportional (`sqrt`). @default 'sqrt' */
+    scale?: 'linear' | 'sqrt' | undefined;
+    /** Outer ring value. @default the largest value, rounded up */
+    max?: number | undefined;
+    /** Degrees clockwise from 12 o'clock. @default 0 */
+    startAngle?: number | undefined;
+    /** @default startAngle + 360 */
+    endAngle?: number | undefined;
+    /** Gap between sectors, in degrees. @default 0 */
+    padAngle?: number | undefined;
+    /** Hole radius as a fraction of the outer radius. @default 0 */
+    innerRadius?: number | undefined;
+    /** Number of grid rings. @default 4 */
+    levels?: number | undefined;
+    /** Write each name at its sector's edge. @default false */
+    labels?: boolean | undefined;
+}
+/** A beeswarm: every observation as a dot, spread sideways so none overlap. */
+interface SwarmPlotInput extends Sized {
+    /** One swarm per series, over that series' raw samples. */
+    series: Series[];
+    /** @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Dot radius in pixels. @default 3 */
+    markerSize?: number | undefined;
+    yAxis?: AxisOptions | undefined;
+    references?: Reference[] | undefined;
+}
+/** A grid of cells, each standing for a share of the total, colored by datum. */
+interface WaffleChartInput extends Sized {
+    data: Datum[];
+    /** What the whole grid stands for. @default the sum of the values */
+    total?: number | undefined;
+    /** @default 10 */
+    rows?: number | undefined;
+    /** @default 10 */
+    columns?: number | undefined;
+    /** Fill column by column from the bottom-left, or row by row from the top-left. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Gap between cells in pixels. @default 2 */
+    cellGap?: number | undefined;
+    /** Cell corner radius in pixels. @default 2 */
+    cellRadius?: number | undefined;
+    /** Write each datum's share after its name in the legend. @default false */
+    labels?: boolean | undefined;
+}
+interface ChordLink extends Identified {
+    source: string;
+    target: string;
+    value: number;
+}
+interface GeoPoint {
+    type: 'Point';
+    coordinates: [number, number];
+}
+interface GeoMultiPoint {
+    type: 'MultiPoint';
+    coordinates: [number, number][];
+}
+interface GeoLineString {
+    type: 'LineString';
+    coordinates: [number, number][];
+}
+interface GeoMultiLineString {
+    type: 'MultiLineString';
+    coordinates: [number, number][][];
+}
+interface GeoPolygon {
+    type: 'Polygon';
+    /** Rings of `[longitude, latitude]` pairs. */
+    coordinates: [number, number][][];
+}
+interface GeoMultiPolygon {
+    type: 'MultiPolygon';
+    coordinates: [number, number][][][];
+}
+interface MapFeature extends Identified {
+    name: string;
+    /** The measure the fill follows; a feature without one is drawn in the neutral fill. */
+    value?: number | undefined;
+    /** Polygons are regions; points become markers and line strings routes, in the same layers as `points`/`lines`. */
+    geometry: GeoPolygon | GeoMultiPolygon | GeoPoint | GeoMultiPoint | GeoLineString | GeoMultiLineString;
+    /** A categorical color for this region, drawn at full opacity. */
+    color?: string | undefined;
+}
+/** A marker at a coordinate; with a `value` its area follows the value (a bubble). */
+interface MapPoint extends Identified {
+    name: string;
+    /** `[longitude, latitude]`. */
+    coordinates: [number, number];
+    value?: number | undefined;
+    color?: string | undefined;
+}
+/** A route or connection drawn through `[longitude, latitude]` points. */
+interface MapLine extends Identified {
+    name: string;
+    coordinates: [number, number][];
+    value?: number | undefined;
+    color?: string | undefined;
+    dash?: string | undefined;
+}
+/** A map's pan/zoom state: the projected centre in `[longitude, latitude]` and a zoom factor. */
+interface MapView {
+    /** @default the centre of the features' bounds */
+    center?: [number, number] | undefined;
+    /** Scale multiplier over the fitted projection, 1–64. @default 1 */
+    zoom?: number | undefined;
+}
+interface RadialBand {
+    from: number;
+    to: number;
+    variant?: Variant | undefined;
+}
+/** What a click, focus or hover refers to. */
+interface ChartItem {
+    /** The tooltip text. */
+    label: string;
+    /** Stable identifier of the datum, node, link or feature; the name when none was given. */
+    id?: ChartItemId | undefined;
+    series?: string | undefined;
+    /** Stable identifier of the series; the series name when none was given. */
+    seriesId?: ChartItemId | undefined;
+    category?: string | undefined;
+    index?: number | undefined;
+    value?: number | undefined;
+    name?: string | undefined;
+    /** Set on legend entries, which toggle a series instead of reporting a value. */
+    legend?: boolean | undefined;
+    /** Set on range-selector buttons: clicking applies this zoom window. */
+    range?: Zoom | undefined;
+}
+interface ShapeBase {
+    /** The `data-skdx-part` value, e.g. `node`, `link`, `grid`. */
+    part: string;
+    /** Native tooltip text. */
+    title?: string | undefined;
+    /** What the mark stands for; makes it clickable and keyboard-focusable. */
+    item?: ChartItem | undefined;
+}
+type Shape = (ShapeBase & {
+    kind: 'path';
+    d: string;
+    fill?: string | undefined;
+    stroke?: string | undefined;
+    strokeWidth?: number | undefined;
+    strokeLinecap?: 'round' | undefined;
+    strokeLinejoin?: 'round' | undefined;
+    opacity?: number | undefined;
+    fillOpacity?: number | undefined;
+    dash?: string | undefined;
+}) | (ShapeBase & {
+    kind: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    stroke?: string | undefined;
+    opacity?: number | undefined;
+    rx?: number | undefined;
+}) | (ShapeBase & {
+    kind: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke: string;
+    dash?: string | undefined;
+    strokeWidth?: number | undefined;
+    opacity?: number | undefined;
+}) | (ShapeBase & {
+    kind: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    stroke?: string | undefined;
+    opacity?: number | undefined;
+}) | (ShapeBase & {
+    kind: 'text';
+    x: number;
+    y: number;
+    text: string;
+    anchor?: 'start' | 'middle' | 'end' | undefined;
+    baseline?: 'middle' | 'hanging' | undefined;
+    fill?: string | undefined;
+    weight?: 'bold' | undefined;
+    /** Rotation in degrees around `(x, y)`, e.g. `-45` for long category labels. */
+    rotate?: number | undefined;
+});
+/** Where the pointer can act inside a cartesian chart: category slots, the shared tooltip rows and the brush strip. */
+interface Hit {
+    plot: Box;
+    /** Pixel center of every visible category. */
+    xs: number[];
+    /** Tooltip lines per visible category: the category, then one per series. */
+    rows: string[][];
+    /** Total category count, before zooming. */
+    count: number;
+    zoom: Zoom;
+    /** The range strip, when `brush` is on. */
+    brush?: {
+        box: Box;
+        window: Box;
+    } | undefined;
+    crosshair: boolean;
+}
+/** What every layout returns: the outer size, the whole chart as shapes and the tooltip switch. */
+interface Canvas {
+    width: number;
+    height: number;
+    /** Everything drawn, back to front: grid, marks, legend and labels. */
+    shapes: Shape[];
+    tooltip: boolean;
+    /** Rewrites a mark's tooltip text; from `TooltipOptions.formatter`. */
+    tooltipFormatter?: ((item: ChartItem) => string | string[]) | undefined;
+    description?: string | undefined;
+    decorative?: boolean | undefined;
+    /** Transition duration in ms when animation is on. */
+    animate?: number | undefined;
+    responsive?: boolean | undefined;
+    hit?: Hit | undefined;
+    /** Rewrites the shared axis tooltip rows; from `TooltipOptions.axisFormatter`. */
+    axisTooltipFormatter?: ((rows: string[], index: number) => string[]) | undefined;
+    /** Render the tooltip as an HTML element over the page; from `TooltipOptions.portal`. */
+    tooltipPortal?: boolean | undefined;
+    /** Where the tooltip box sits; from `TooltipOptions.placement`. */
+    tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /** Anchor the tooltip to the mark instead of the pointer; from `TooltipOptions.followPointer: false`. */
+    tooltipAnchored?: boolean | undefined;
+    /** Gradient definitions the shapes reference as `url(#id)`. */
+    defs?: GradientDef[] | undefined;
+    /** Data problems found while laying out, for `onDataIssue`. */
+    issues?: ChartDataIssue[] | undefined;
+    /** Header and rows of the accessible table, when `accessibleTable` is on. */
+    table?: string[][] | undefined;
+    /** How Gantt bars map to time, so a root can turn a drag into a task change. */
+    edit?: EditModel | undefined;
+    /** The map's projection state, so a root can pan and zoom it. */
+    map?: MapModel | undefined;
+    /** Width of a left legend column the marks still have to move right by; see `placeLegend`. */
+    legendOffset?: number | undefined;
+}
+/** A linear gradient a shape's fill can reference as `url(#id)`. */
+interface GradientDef {
+    id: string;
+    /** Direction: top-to-bottom by default. */
+    vertical?: boolean | undefined;
+    stops: {
+        offset: number;
+        color: string;
+        opacity?: number | undefined;
+    }[];
+}
+/** What a root needs to drag Gantt bars: the time scale and where each editable bar sits. */
+interface EditModel {
+    /** Pixel x of a time value. */
+    scale: (value: number) => number;
+    /** Time value of a pixel x. */
+    invert: (x: number) => number;
+    /** Editable bars by shape index: their task and pixel extent. */
+    bars: {
+        index: number;
+        id: ChartItemId;
+        name: string;
+        start: number;
+        end: number;
+        x0: number;
+        x1: number;
+        y: number;
+        height: number;
+    }[];
+    /** Round dragged times to this step (ms or units), when set. */
+    snap?: number | undefined;
+}
+/** A dragged or resized task, as reported by `onTaskChange`. */
+interface TaskChange {
+    id: ChartItemId;
+    name: string;
+    start: number;
+    end: number;
+}
+/** The map's pan/zoom state and the bounds it was fitted to. */
+interface MapModel {
+    view: {
+        center: [number, number];
+        zoom: number;
+    };
+    /** The projected bounds at zoom 1, in the projection's own units. */
+    bounds: {
+        minLon: number;
+        maxLon: number;
+        minLat: number;
+        maxLat: number;
+    };
+    /** Plot area the map is drawn in. */
+    plot: Box;
+    /** Pixels per projected unit at the current zoom. */
+    scale: number;
+    /** Latitude to the projection's y unit, and back; identity for equirectangular. */
+    toY: (latitude: number) => number;
+    fromY: (y: number) => number;
+}
+
+/** What `exportChart` produces and how. */
+type ChartExportOptions = {
+    /** Accessible name written into the SVG. */
+    label: string;
+    /** Maps `var(--skdx-…)` to concrete colors, e.g. from `getComputedStyle`. Required for PNG. */
+    resolve?: ((cssVariable: string) => string) | undefined;
+} & ({
+    type: 'svg';
+} | {
+    type: 'png';
+    /** Device pixels per unit. @default 2 */
+    scale?: number | undefined;
+    /** Fill behind the chart, e.g. the page surface; transparent by default. */
+    background?: string | undefined;
+} | {
+    type: 'csv';
+    rows: (string | number | null | undefined)[][];
+});
+/**
+ * One entry point for the export formats: SVG markup, a PNG blob (browser only), or CSV of the
+ * rows given. Rejects when a PNG is asked for outside a browser.
+ */
+declare function exportChart(layout: Canvas, options: ChartExportOptions): Promise<string | Blob>;
+/**
+ * A standalone SVG document of a layout, for download or server rendering. Colors stay as
+ * `var(--skdx-…)` references unless `resolve` maps them to concrete values, e.g. from
+ * `getComputedStyle(document.documentElement).getPropertyValue(name)`.
+ */
+declare function svgMarkup(layout: Canvas, label: string, resolve?: (cssVariable: string) => string): string;
+/** RFC 4180 CSV of rows, for "download data" and clipboard copy. */
+declare function csv(rows: (string | number | null | undefined)[][]): string;
+/** Series and categories as CSV rows: a header of series names, one row per category. */
+declare function seriesCsv(series: {
+    name: string;
+    data: (number | null)[];
+}[], categories?: (string | number | Date)[]): string;
+
+/** A pie, a donut when `innerRadius` is set, or a half circle with `startAngle`/`endAngle`; one slice per datum. */
+declare class SkdxPieChart extends SkdxRootElement {
+    data: Datum[];
+    /** A donut is a pie with innerRadius 0.6 unless set. */
+    variant: 'pie' | 'donut' | undefined;
+    /** Hole radius as a fraction of the outer radius: 0 is a pie, 0.6 a donut. */
+    innerRadius: number | undefined;
+    /** Outer radius as a fraction of the space available. */
+    outerRadius: number | undefined;
+    /** Write each slice's name and share on the slice. */
+    labels: boolean;
+    /** Inside the slice, or outside with a connector. */
+    labelPosition: 'inside' | 'outside' | undefined;
+    /** Gap between slices, in degrees. */
+    padAngle: number | undefined;
+    /** Order slices by value. */
+    sort: 'asc' | 'desc' | undefined;
+    /** Degrees clockwise from 12 o'clock where the first slice starts. */
+    startAngle: number | undefined;
+    /** Degrees where the last slice ends; -90/90 makes a half circle. */
+    endAngle: number | undefined;
+    /** Text in the middle of a donut. */
+    centerLabel: string | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pie-chart': SkdxPieChart;
+    }
+}
+
+/** One dot per `[x, y]` pair, or a bubble per `[x, y, size]` triple, on two linear axes. */
+declare class SkdxScatterChart extends SkdxRootElement {
+    series: ScatterSeries[];
+    /** Bubble radius range in pixels. */
+    sizeRange: [number, number] | undefined;
+    /** Write each point's label next to it. */
+    labels: boolean;
+    xAxis: AxisOptions | undefined;
+    yAxis: AxisOptions | undefined;
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    /** Colors points by their `value`. */
+    colorScale: ColorScale | undefined;
+    /** Draw the color scale under the plot; an object sets orientation and title. */
+    colorLegend: boolean | ColorLegendOptions | undefined;
+    /** Extra invisible hover radius in pixels. */
+    hitRadius: number | undefined;
+    /** Ring offset in pixels for overlapping points. */
+    jitter: number | undefined;
+    /** Least-squares fit per series; true is linear. */
+    trendline: boolean | 'linear' | 'exponential' | 'logarithmic' | 'power' | 'polynomial' | undefined;
+    /** Systematic sampling above this many points. */
+    sampling: 'none' | 'auto' | {
+        threshold: number;
+    } | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-scatter-chart': SkdxScatterChart;
+    }
+}
+
+/** A small axis-less trend: an area, a bare line or bars, with optional extremes and last value. */
+declare class SkdxSparkline extends SkdxRootElement {
+    data: Value[];
+    color: string | undefined;
+    curve: Curve | undefined;
+    variant: 'area' | 'line' | 'bar' | 'winloss' | undefined;
+    /** Color by direction: success when rising, danger when falling. */
+    trend: boolean;
+    /** Mark the minimum and maximum. */
+    extremes: boolean;
+    /** Write the last value after the line. */
+    lastValue: boolean;
+    /** A dashed reference line at this value. */
+    target: number | undefined;
+    /** A shaded band between two values. */
+    band: [number, number] | undefined;
+    /** Dots on the first and/or last point. */
+    markers: ('first' | 'last')[] | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sparkline': SkdxSparkline;
+    }
+}
+
+/** One polygon per series over a spoke per category. */
+declare class SkdxRadarChart extends SkdxRootElement {
+    series: Series[];
+    /** One axis per category. */
+    categories: string[] | undefined;
+    /** Axes with their own min/max scales. */
+    metrics: RadarMetric[] | undefined;
+    /** `metric` scales each axis by its own bounds; `series` (or `true`) scales each series to its own maximum; `none` shares one scale. */
+    normalized: boolean | 'metric' | 'series' | 'none' | undefined;
+    /** Outer ring value. */
+    max: number | undefined;
+    /** Fill the polygons. */
+    fill: boolean;
+    /** Number of grid rings. */
+    levels: number | undefined;
+    /** Dots on the vertices. */
+    markers: boolean;
+    /** Marker radius in pixels. */
+    markerSize: number | undefined;
+    /** Write each value at its vertex. */
+    labels: boolean;
+    /** Degrees clockwise from 12 o'clock of the first axis. */
+    startAngle: number | undefined;
+    /** Grid rings as polygons or circles. */
+    gridShape: 'polygon' | 'circle' | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radar-chart': SkdxRadarChart;
+    }
+}
+
+/** A grid of cells whose opacity follows the value; `calendar` lays days out as weekday rows and week columns. */
+declare class SkdxHeatmap extends SkdxRootElement {
+    rows: string[] | undefined;
+    columns: string[] | undefined;
+    /** `data[row][column]`. */
+    data: Value[][] | undefined;
+    /** One value per day, instead of rows/columns/data. */
+    calendar: CalendarCell[] | undefined;
+    color: string | undefined;
+    /** Split around zero: negatives use `negativeColor`. */
+    diverging: boolean;
+    negativeColor: string | undefined;
+    /** Write each value in its cell. */
+    labels: boolean;
+    /** Value range the opacity ramp covers. */
+    domain: [number, number] | undefined;
+    /** Quantize the color ramp into this many steps. */
+    steps: number | undefined;
+    /** First day of the calendar week. */
+    weekStart: 'monday' | 'sunday' | undefined;
+    /** A full color scale; wins over color/diverging/steps/domain. */
+    colorScale: ColorScale | undefined;
+    /** Draw the color scale under the grid; an object sets orientation and title. */
+    colorLegend: boolean | ColorLegendOptions | undefined;
+    /** Fill for null cells. */
+    missingColor: string | undefined;
+    /** Gap between cells in pixels. */
+    cellGap: number | undefined;
+    /** Cell corner radius in pixels. */
+    cellRadius: number | undefined;
+    /** Order rows by their sum. */
+    rowOrder: 'asc' | 'desc' | undefined;
+    /** Order columns by their sum. */
+    columnOrder: 'asc' | 'desc' | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-heatmap': SkdxHeatmap;
+    }
+}
+
+/** Stages narrowing with their value, or a pyramid; vertical or horizontal. */
+declare class SkdxFunnelChart extends SkdxRootElement {
+    data: Datum[];
+    orientation: 'vertical' | 'horizontal' | undefined;
+    variant: 'funnel' | 'pyramid' | undefined;
+    /** Gap between stages in pixels. */
+    gap: number | undefined;
+    /** Stage labels inside, beside, or hidden. */
+    labelPosition: 'inside' | 'outside' | 'none' | undefined;
+    /** Order stages by value. */
+    sort: 'asc' | 'desc' | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-funnel-chart': SkdxFunnelChart;
+    }
+}
+
+/** Flows between nodes, node heights and ribbon widths by value. */
+declare class SkdxSankeyChart extends SkdxRootElement {
+    links: SankeyLink[];
+    /** Explicit nodes with labels and colors. */
+    nodes: SankeyNode[] | undefined;
+    /** justify pushes sinks to the last column. */
+    align: 'left' | 'justify' | undefined;
+    /** Node thickness in pixels. */
+    nodeWidth: number | undefined;
+    /** Vertical gap between nodes in a column. */
+    nodePadding: number | undefined;
+    /** Order nodes inside a column by value. */
+    nodeSort: 'asc' | 'desc' | undefined;
+    /** Order the ribbons leaving a node by value. */
+    linkSort: 'asc' | 'desc' | undefined;
+    /** Write node names. */
+    nodeLabels: boolean;
+    /** Write each link's value on it. */
+    linkLabels: boolean;
+    /** What to do with links that close a cycle. */
+    cyclePolicy: 'drop' | 'warn' | 'error' | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sankey-chart': SkdxSankeyChart;
+    }
+}
+
+/** Squarified tiles by value; branches are outlined and their children tiled inside. */
+declare class SkdxTreemap extends SkdxRootElement {
+    data: TreeNode[];
+    /** Id (or name) of the node shown as the whole chart: controlled drill-down. */
+    rootId: ChartItemId | undefined;
+    /** Write the path to `rootId` above the tiles. */
+    breadcrumbs: boolean;
+    /** Deepest level tiled. */
+    maxDepth: number | undefined;
+    /** Tile order inside a branch. */
+    sort: 'asc' | 'desc' | 'none' | undefined;
+    /** Inset of children inside their branch, in pixels. */
+    padding: number | undefined;
+    /** Tiling algorithm. */
+    tiling: 'squarify' | 'slice' | 'dice' | 'sliceDice' | undefined;
+    /** Colors leaves by their value. */
+    colorScale: ColorScale | undefined;
+    /** Write leaf names on tiles wide enough. */
+    labels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-treemap': SkdxTreemap;
+    }
+}
+
+/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */
+declare class SkdxCandlestickChart extends SkdxRootElement {
+    data: Candle[];
+    scale: 'linear' | 'log' | undefined;
+    variant: 'candlestick' | 'ohlc' | undefined;
+    xAxis: Pick<AxisOptions, 'format'> | undefined;
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    /** Moving-average lines over the candles. */
+    overlays: CandlestickOverlay[] | undefined;
+    upColor: string | undefined;
+    downColor: string | undefined;
+    brush: boolean;
+    crosshair: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-candlestick-chart': SkdxCandlestickChart;
+    }
+}
+
+/** Signed deltas stacked on the running total, with an optional closing total bar. */
+declare class SkdxWaterfallChart extends SkdxRootElement {
+    /** Signed deltas; `subtotal` rows show the running total. */
+    data: WaterfallDatum[];
+    /** Label of a final bar showing the running total. */
+    total: string | undefined;
+    /** Opening value the first delta applies to. */
+    start: number | undefined;
+    /** Label of the opening bar. */
+    startLabel: string | undefined;
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Dashed lines carrying the running total between bars. */
+    connectors: boolean;
+    /** Write each delta next to its bar. */
+    labels: boolean;
+    positiveColor: string | undefined;
+    negativeColor: string | undefined;
+    /** Color of subtotal and total bars. */
+    totalColor: string | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-waterfall-chart': SkdxWaterfallChart;
+    }
+}
+
+/** Intervals on a numeric time axis, one row per task or per `group`. */
+declare class SkdxGanttChart extends SkdxRootElement {
+    tasks: GanttTask[];
+    /** Vertical lines and bands in time coordinates, e.g. today. */
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    /** A labelled "Today" line at this time. */
+    today: number | Date | undefined;
+    /** Highlight the longest dependency chain. */
+    criticalPath: boolean;
+    /** How task times are written. */
+    xAxis: Pick<AxisOptions, 'format' | 'label' | 'ticks'> | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-gantt-chart': SkdxGanttChart;
+    }
+}
+
+/** One Tukey box per series over its raw samples. */
+declare class SkdxBoxplot extends SkdxRootElement {
+    /** Raw samples, or precomputed summaries. */
+    series: BoxplotSeries[];
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** How quartiles are taken from a sample. */
+    quartileMethod: 'linear' | 'exclusive' | 'tukey' | undefined;
+    /** Whisker reach as a multiple of the IQR. */
+    whisker: number | undefined;
+    /** Mark the mean with a diamond. */
+    mean: boolean;
+    /** Draw every observation, jittered. */
+    points: boolean;
+    /** Notch the box around the median. */
+    notched: boolean;
+    /** Groups: one box per series inside each category. */
+    categories: string[] | undefined;
+    yAxis: AxisOptions | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-boxplot': SkdxBoxplot;
+    }
+}
+
+/** Nested rings, one per tree depth, children inside their parent's span. */
+declare class SkdxSunburstChart extends SkdxRootElement {
+    data: TreeNode[];
+    /** Hole radius as a fraction of the outer radius. */
+    innerRadius: number | undefined;
+    /** Text in the middle, e.g. the total. */
+    centerLabel: string | undefined;
+    /** Write names on the arcs wide enough to hold them. */
+    labels: boolean;
+    /** Id (or name) of the node whose subtree fills the rings. */
+    rootId: ChartItemId | undefined;
+    /** Write the path to `rootId` in the middle. */
+    breadcrumbs: boolean;
+    /** Deepest ring drawn. */
+    maxDepth: number | undefined;
+    /** Arc order inside a parent. */
+    sort: 'asc' | 'desc' | 'none' | undefined;
+    /** Degrees clockwise from 12 o'clock. */
+    startAngle: number | undefined;
+    endAngle: number | undefined;
+    /** Gap between sibling arcs, in degrees. */
+    padAngle: number | undefined;
+    /** Colors arcs by their value. */
+    colorScale: ColorScale | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sunburst-chart': SkdxSunburstChart;
+    }
+}
+
+/** Groups around a circle with ribbons for the flows between them. */
+declare class SkdxChordChart extends SkdxRootElement {
+    /** Group names in order; required with `matrix`. */
+    names: string[] | undefined;
+    /** `matrix[i][j]` is the flow from `i` to `j`. */
+    matrix: number[][] | undefined;
+    /** Edge-list form of the matrix. */
+    links: ChordLink[] | undefined;
+    /** Angular gap between groups, in degrees. */
+    padding: number | undefined;
+    /** Order groups by their total flow. */
+    sort: 'asc' | 'desc' | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-chord-chart': SkdxChordChart;
+    }
+}
+
+/** A choropleth of GeoJSON regions, opacity by value. */
+declare class SkdxMapChart extends SkdxRootElement {
+    features: MapFeature[];
+    /** The region color; each region's opacity follows its value. */
+    color: string | undefined;
+    /** A full color scale for the regions. */
+    colorScale: ColorScale | undefined;
+    /** Draw the color scale under the map; an object sets orientation and title. */
+    colorLegend: boolean | ColorLegendOptions | undefined;
+    projection: 'equirectangular' | 'mercator' | undefined;
+    /** A marker layer; markers with a value are sized by it. */
+    points: MapPoint[] | undefined;
+    /** A line layer: routes and connections. */
+    lines: MapLine[] | undefined;
+    /** Marker radius range in pixels. */
+    sizeRange: [number, number] | undefined;
+    /** Write each region's name at its centre. */
+    labels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-map-chart': SkdxMapChart;
+    }
+}
+
+/** Concentric arcs, one per datum, each a share of `max`: KPI completion, utilization, quota, health. */
+declare class SkdxRadialBarChart extends SkdxRootElement {
+    data: Datum[];
+    /** The value a full arc represents. */
+    max: number | undefined;
+    /** Degrees clockwise from 12 o'clock. */
+    startAngle: number | undefined;
+    endAngle: number | undefined;
+    /** Hole radius as a fraction of the outer radius. */
+    innerRadius: number | undefined;
+    /** Gap between arcs as a fraction of one arc's thickness. */
+    gap: number | undefined;
+    /** Draw the full-range track behind each arc. */
+    track: boolean;
+    /** Round the arc ends. */
+    rounded: boolean;
+    /** Write each name and value at the arc start. */
+    labels: boolean;
+    /** Threshold sectors outside the arcs, in value units. */
+    bands: RadialBand[] | undefined;
+    /** A tick across every arc at this value. */
+    target: number | undefined;
+    /** Text in the middle, e.g. the headline value. */
+    centerLabel: string | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radial-bar-chart': SkdxRadialBarChart;
+    }
+}
+
+/** One reading on an arc scale: a needle over threshold bands (`radial`), or the arc filled up to the value (`solid`). */
+declare class SkdxGaugeChart extends SkdxRootElement {
+    /** The reading; values outside min–max are clamped. */
+    value: number;
+    /** Scale start. Defaults to 0. */
+    min: number | undefined;
+    /** Scale end. Defaults to 100. */
+    max: number | undefined;
+    variant: 'radial' | 'solid' | undefined;
+    /** Degrees clockwise from 12 o'clock; -90/90 is a semi-circle. */
+    startAngle: number | undefined;
+    endAngle: number | undefined;
+    /** Arc thickness as a fraction of the radius. */
+    thickness: number | undefined;
+    /** Threshold sectors in value units. */
+    bands: Band[] | undefined;
+    /** A marker at this value. */
+    target: number | undefined;
+    /** Tick count including both ends; false or 0 for none, true for 5. Defaults to 5. */
+    ticks: number | boolean | undefined;
+    /** Write the tick values. */
+    tickLabels: boolean;
+    /** Text in the middle; defaults to the formatted value. */
+    centerLabel: string | undefined;
+    /** Smaller text under the value, e.g. the metric name. */
+    caption: string | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-gauge-chart': SkdxGaugeChart;
+    }
+}
+
+/** Three quantities per mark: x, y and a magnitude the bubble's area follows. */
+declare class SkdxBubbleChart extends SkdxRootElement {
+    series: BubbleSeries[];
+    /** Smallest and largest bubble radius in pixels. */
+    sizeRange: [number, number] | undefined;
+    /** Write each bubble's label on it. */
+    labels: boolean;
+    xAxis: AxisOptions | undefined;
+    yAxis: AxisOptions | undefined;
+    /** How the magnitude is named and written. */
+    zAxis: Pick<AxisOptions, 'format' | 'label'> | undefined;
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    /** Colors bubbles by their `value` (or `z`). */
+    colorScale: ColorScale | undefined;
+    /** Draw the color scale under the plot; an object sets orientation and title. */
+    colorLegend: boolean | ColorLegendOptions | undefined;
+    /** Extra invisible hover radius in pixels. */
+    hitRadius: number | undefined;
+    /** Ring offset in pixels for overlapping points. */
+    jitter: number | undefined;
+    /** Least-squares fit per series; true is linear. */
+    trendline: boolean | 'linear' | 'exponential' | 'logarithmic' | 'power' | 'polynomial' | undefined;
+    /** Systematic sampling above this many points. */
+    sampling: 'none' | 'auto' | {
+        threshold: number;
+    } | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-bubble-chart': SkdxBubbleChart;
+    }
+}
+
+/** The distribution of a raw sample in equal-width or explicit bins, as counts, density or shares. */
+declare class SkdxHistogram extends SkdxRootElement {
+    /** The raw sample. */
+    data: Value[];
+    /** Series name in tooltips and the legend. */
+    name: string | undefined;
+    color: string | undefined;
+    /** Bin count; defaults to Sturges' rule. */
+    bins: number | undefined;
+    /** Bin width; wins over bins. */
+    binWidth: number | undefined;
+    /** Explicit ascending bin edges. */
+    thresholds: number[] | undefined;
+    /** Value range binned; samples outside are dropped. */
+    domain: [number, number] | undefined;
+    mode: 'count' | 'density' | 'percent' | undefined;
+    xAxis: Pick<AxisOptions, 'format' | 'label'> | undefined;
+    yAxis: AxisOptions | undefined;
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    /** Write each bin's value above its bar. */
+    labels: boolean;
+    /** Share of each bin slot left empty. */
+    barGap: number | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-histogram': SkdxHistogram;
+    }
+}
+
+/** A measure against a target over qualitative ranges, one row (or column) per KPI. */
+declare class SkdxBulletChart extends SkdxRootElement {
+    data: BulletDatum[];
+    orientation: 'horizontal' | 'vertical' | undefined;
+    /** Qualitative ranges shared by every datum without its own. */
+    ranges: (number | Band)[] | undefined;
+    /** Scale start. */
+    min: number | undefined;
+    /** Scale end. */
+    max: number | undefined;
+    /** Write each value after its bar. */
+    labels: boolean;
+    /** Approximate tick count of the value axis. */
+    ticks: number | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-bullet-chart': SkdxBulletChart;
+    }
+}
+
+/** Bars, lines, areas and ranges on one category axis; every series declares its `type`. */
+declare class SkdxComboChart extends SkdxChartElement {
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-combo-chart': SkdxComboChart;
+    }
+}
+
+/** Low–high intervals per category: a shaded band, floating bars or two outlines. */
+declare class SkdxRangeChart extends SkdxRootElement {
+    series: RangeChartSeries[];
+    variant: 'area' | 'bar' | 'line' | undefined;
+    categories: Category[] | undefined;
+    xAxis: XAxisOptions | undefined;
+    yAxis: AxisOptions | undefined;
+    rightAxis: AxisOptions | undefined;
+    references: Reference[] | undefined;
+    annotations: Annotation[] | undefined;
+    curve: Curve | undefined;
+    connectNulls: boolean;
+    orientation: 'vertical' | 'horizontal' | undefined;
+    radius: number | undefined;
+    barGap: number | undefined;
+    /** Largest bar thickness in pixels. */
+    barWidth: number | undefined;
+    brush: boolean;
+    crosshair: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-range-chart': SkdxRangeChart;
+    }
+}
+
+/** Nodes and edges of a graph: force-directed, circular or at given coordinates. */
+declare class SkdxNetworkChart extends SkdxRootElement {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+    arrange: 'force' | 'circular' | 'manual' | undefined;
+    /** Write node labels (off above 60 nodes unless set). */
+    labels: boolean;
+    /** Smallest and largest node radius in pixels. */
+    nodeRange: [number, number] | undefined;
+    /** Force-layout iterations. */
+    iterations: number | undefined;
+    /** Draw an arrowhead at the target end of every edge. */
+    directed: boolean;
+    /** Write edge labels at the middle of each edge. */
+    edgeLabels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-network-chart': SkdxNetworkChart;
+    }
+}
+
+/** Point-in-time events on a time axis, in lanes with staggered labels, or as a vertical list. */
+declare class SkdxTimelineChart extends SkdxRootElement {
+    events: TimelineEvent[];
+    orientation: 'horizontal' | 'vertical' | undefined;
+    /** How dates are written. */
+    xAxis: Pick<AxisOptions, 'format' | 'label'> | undefined;
+    /** Write event labels. */
+    labels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-chart': SkdxTimelineChart;
+    }
+}
+
+/** Columns as wide as their total with segments stacked to 100% inside: size and mix in one chart. */
+declare class SkdxMarimekkoChart extends SkdxRootElement {
+    /** Segment names in stacking order, one color each. */
+    segments: (string | Pick<Datum, 'id' | 'name' | 'color'>)[];
+    data: MarimekkoCategory[];
+    /** Write segment shares inside cells wide enough. */
+    labels: boolean;
+    /** Gap between columns as a share of the plot width. */
+    gap: number | undefined;
+    /** How column totals are written. */
+    xAxis: Pick<AxisOptions, 'format' | 'label'> | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-marimekko-chart': SkdxMarimekkoChart;
+    }
+}
+
+/** One vertical axis per dimension, each on its own scale, and a line per row through its values. */
+declare class SkdxParallelCoordinatesChart extends SkdxRootElement {
+    dimensions: ParallelDimension[];
+    data: ParallelRow[];
+    /** Line opacity; defaults to 0.6, lower above 200 rows. */
+    opacity: number | undefined;
+    curve: Curve | undefined;
+    /** Draw lines across missing values. */
+    connectNulls: boolean;
+    /** Rows outside these ranges fade. */
+    filters: {
+        key: string;
+        min?: number | undefined;
+        max?: number | undefined;
+    }[] | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-parallel-coordinates-chart': SkdxParallelCoordinatesChart;
+    }
+}
+
+/** A single reading on a straight scale with bands and a target: the bullet engine with gauge semantics. */
+declare class SkdxLinearGauge extends SkdxRootElement {
+    /** The reading. */
+    value: number;
+    /** Scale start. Defaults to 0. */
+    min: number | undefined;
+    /** Scale end. Defaults to 100 or the largest of value, target and bands. */
+    max: number | undefined;
+    /** A marker at this value. */
+    target: number | undefined;
+    /** Threshold sectors in value units. */
+    bands: Band[] | undefined;
+    orientation: 'horizontal' | 'vertical' | undefined;
+    /** The metric name, written before the scale and in tooltips. */
+    caption: string | undefined;
+    /** Write the value after the bar. */
+    labels: boolean;
+    /** Approximate tick count of the scale. */
+    ticks: number | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-linear-gauge': SkdxLinearGauge;
+    }
+}
+
+/** A start and an end value per category joined by a connector: before/after, plan/actual. */
+declare class SkdxDumbbellChart extends SkdxRootElement {
+    data: DumbbellDatum[];
+    /** Name of the start markers, for the legend and tooltips. */
+    startLabel: string | undefined;
+    /** Name of the end markers. */
+    endLabel: string | undefined;
+    orientation: 'horizontal' | 'vertical' | undefined;
+    /** Write both values next to their markers. */
+    labels: boolean;
+    /** Order categories by end value, or by the change. */
+    sort: 'asc' | 'desc' | 'change' | undefined;
+    /** Marker radius in pixels. */
+    markerSize: number | undefined;
+    xAxis: AxisOptions | undefined;
+    references: Reference[] | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dumbbell-chart': SkdxDumbbellChart;
+    }
+}
+
+/** Categories sorted by value with the cumulative share as a line on the right axis. */
+declare class SkdxParetoChart extends SkdxRootElement {
+    data: Datum[];
+    /** A cumulative-share reference line, e.g. 0.8. */
+    threshold: number | undefined;
+    /** Name of the cumulative line. */
+    cumulativeLabel: string | undefined;
+    /** Name of the bars. */
+    name: string | undefined;
+    labels: boolean;
+    radius: number | undefined;
+    barGap: number | undefined;
+    barWidth: number | undefined;
+    xAxis: XAxisOptions | undefined;
+    yAxis: AxisOptions | undefined;
+    brush: boolean;
+    crosshair: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-pareto-chart': SkdxParetoChart;
+    }
+}
+
+/** Ranks over categories: one line per series, the top rank at the top. */
+declare class SkdxBumpChart extends SkdxRootElement {
+    /** Values per category; ranks are computed unless `ranked`. */
+    series: Series[];
+    categories: Category[] | undefined;
+    /** The data are already ranks (1 = first). */
+    ranked: boolean;
+    /** Only the first `topRank` ranks are drawn. */
+    topRank: number | undefined;
+    curve: Curve | undefined;
+    /** Write series names at the right end of their line. */
+    labels: boolean;
+    /** Marker radius in pixels. */
+    markerSize: number | undefined;
+    xAxis: XAxisOptions | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-bump-chart': SkdxBumpChart;
+    }
+}
+
+/** A Nightingale rose: equal angular sectors whose radius follows the value. */
+declare class SkdxPolarAreaChart extends SkdxRootElement {
+    data: Datum[];
+    /** Radius proportional to the value, or to its square root (area-proportional). */
+    scale: 'linear' | 'sqrt' | undefined;
+    /** Outer ring value. */
+    max: number | undefined;
+    /** Degrees clockwise from 12 o'clock. */
+    startAngle: number | undefined;
+    endAngle: number | undefined;
+    /** Gap between sectors, in degrees. */
+    padAngle: number | undefined;
+    /** Hole radius as a fraction of the outer radius. */
+    innerRadius: number | undefined;
+    /** Number of grid rings. */
+    levels: number | undefined;
+    /** Write each name at its sector's edge. */
+    labels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-polar-area-chart': SkdxPolarAreaChart;
+    }
+}
+
+/** A beeswarm: every observation as a dot, spread sideways so none overlap. */
+declare class SkdxSwarmPlot extends SkdxRootElement {
+    /** One swarm per series, over its raw samples. */
+    series: Series[];
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Dot radius in pixels. */
+    markerSize: number | undefined;
+    yAxis: AxisOptions | undefined;
+    references: Reference[] | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-swarm-plot': SkdxSwarmPlot;
+    }
+}
+
+/** A grid of cells, each standing for a share of the total, colored by datum. */
+declare class SkdxWaffleChart extends SkdxRootElement {
+    data: Datum[];
+    /** What the whole grid stands for. */
+    total: number | undefined;
+    rows: number | undefined;
+    columns: number | undefined;
+    /** Fill direction. */
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Gap between cells in pixels. */
+    cellGap: number | undefined;
+    /** Cell corner radius in pixels. */
+    cellRadius: number | undefined;
+    /** Write each datum's share after its name in the legend. */
+    labels: boolean;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-waffle-chart': SkdxWaffleChart;
+    }
+}
+
+/** A node-link tree: one dot or box per node with links to its children, top-down or left-right. */
+declare class SkdxTreeChart extends SkdxRootElement {
+    data: TreeNode[];
+    /** Root at the top, or at the left. */
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Dots with labels beside them, or boxes holding the name. */
+    nodeShape: 'circle' | 'box' | undefined;
+    linkStyle: 'curve' | 'elbow' | 'straight' | undefined;
+    /** Id (or name) of the node shown as the root. */
+    rootId: ChartItemId | undefined;
+    /** Nodes whose children are hidden. */
+    collapsed: ChartItemId[] | undefined;
+    /** Deepest level drawn. */
+    maxDepth: number | undefined;
+    /** Write node names. */
+    labels: boolean;
+    /** Dot radius, or box height, in pixels. */
+    nodeSize: number | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-chart': SkdxTreeChart;
+    }
+}
+
+/** A tree of boxes with elbow links and optional subtitles: reporting lines, ownership, hierarchies. */
+declare class SkdxOrganizationChart extends SkdxRootElement {
+    data: TreeNode[];
+    /** Root at the top, or at the left. */
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Id (or name) of the node shown as the root. */
+    rootId: ChartItemId | undefined;
+    /** Nodes whose children are hidden. */
+    collapsed: ChartItemId[] | undefined;
+    /** Deepest level drawn. */
+    maxDepth: number | undefined;
+    /** Write node names. */
+    labels: boolean;
+    /** Box height in pixels. */
+    nodeSize: number | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-organization-chart': SkdxOrganizationChart;
+    }
+}
+
+/** Nested circles sized by value, children packed inside their parent. */
+declare class SkdxCirclePackingChart extends SkdxRootElement {
+    data: TreeNode[];
+    /** Id (or name) of the node shown as the whole chart. */
+    rootId: ChartItemId | undefined;
+    /** Deepest level drawn. */
+    maxDepth: number | undefined;
+    /** Write names on circles wide enough. */
+    labels: boolean;
+    /** Gap between sibling circles, in pixels. */
+    padding: number | undefined;
+    /** Colors leaves by their value. */
+    colorScale: ColorScale | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-circle-packing-chart': SkdxCirclePackingChart;
+    }
+}
+
+/** A rectangular sunburst: one row per depth, children inside their parent's span. */
+declare class SkdxIcicleChart extends SkdxRootElement {
+    data: TreeNode[];
+    /** Root row at the top, or root column at the left. */
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Id (or name) of the node shown as the whole chart. */
+    rootId: ChartItemId | undefined;
+    /** Write the path to `rootId` above the cells. */
+    breadcrumbs: boolean;
+    /** Deepest level drawn. */
+    maxDepth: number | undefined;
+    /** Cell order inside a parent. */
+    sort: 'asc' | 'desc' | 'none' | undefined;
+    /** Write names on cells wide enough. */
+    labels: boolean;
+    /** Gap between cells, in pixels. */
+    padding: number | undefined;
+    /** Colors cells by their value. */
+    colorScale: ColorScale | undefined;
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-icicle-chart': SkdxIcicleChart;
+    }
+}
+
+/** How clicks (and, for `brush`/`lasso`, drags) change the selection. */
+type SelectionMode = 'none' | 'single' | 'multiple' | 'brush' | 'lasso';
+/**
+ * The accessible `<svg>` root every chart renders into. Owns focus, hidden-series, zoom,
+ * selection and map-view state and drives it with the core helpers; fires `skdx-item-click`,
+ * `skdx-hidden-series-change`, `skdx-zoom-change`, `skdx-view-change`, `skdx-selected-change`,
+ * `skdx-highlighted-change`, `skdx-task-change` and `skdx-data-issue`.
+ */
+declare abstract class SkdxRootElement extends LitElement {
+    static styles: lit.CSSResult;
+    /** @default 600 (300 for the round charts, 120 for sparklines) */
+    width: number | undefined;
+    /** @default 300 (32 for sparklines) */
+    height: number | undefined;
+    /** Accessible name of the chart; defaults to "<Kind> chart". */
+    label: string | undefined;
+    /** Draw a legend row above the plot; set an object as a property for position and item limit. */
+    legend: boolean | LegendOptions;
+    /** Show a hover tooltip for the mark under the pointer; set an object as a property to configure it. @default true */
+    tooltip: boolean | TooltipOptions;
+    /** How values are written: a function or an `Intl` style such as `{ style: 'currency', currency: 'EUR' }`. */
+    format: Format | undefined;
+    /** Categorical series colors, cycled by series index. */
+    palette: string[] | undefined;
+    /** Series left out of the plot; set it to control the legend toggles, listen to `skdx-hidden-series-change`. */
+    hiddenSeries: string[] | undefined;
+    /** Selected items; set it to control the selection, listen to `skdx-selected-change`. */
+    selected: Selection | undefined;
+    /** Clicks select marks: one, any number, a dragged rectangle or a drawn outline. */
+    selectionMode: SelectionMode;
+    /** The item(s) under emphasis; listen to `skdx-highlighted-change` for hover and focus. */
+    highlighted: Sized['highlighted'];
+    highlightScope: HighlightScope | undefined;
+    /** Draw a loading placeholder instead of the chart. */
+    loading: boolean;
+    /** Draw this message instead of the chart. */
+    error: string | undefined;
+    /** Written in place of an empty chart. */
+    emptyMessage: string | undefined;
+    /** Longer accessible description, rendered as the svg `<desc>`. */
+    description: string | undefined;
+    /** Hide the chart from assistive technology. */
+    decorative: boolean;
+    /** Render a visually hidden data table next to the svg. */
+    accessibleTable: boolean | AccessibleTableOptions;
+    /** Visible category window; set it to control zoom, listen to `skdx-zoom-change`. */
+    zoom: Zoom | undefined;
+    /** The map's pan/zoom state; set it to control the view, listen to `skdx-view-change`. */
+    view: MapView | undefined;
+    /** Wheel and pinch zoom, drag pans the category axis (or the map). */
+    zoomable: boolean;
+    /** Gantt bars can be dragged and resized; listen to `skdx-task-change`. */
+    editable: boolean;
+    /** Charts sharing a `sync-id` share highlight, selection, zoom, hidden series and the crosshair. */
+    syncId: string | undefined;
+    /** With `sync-id`: a selection made in another chart of the group fades everything else here. */
+    crossFilter: boolean;
+    /**
+     * Fade marks in and transition them on change; the `animated` attribute is 300 ms,
+     * `animated="120"` sets the duration. (`animate()` is a DOM method, hence the name.)
+     */
+    animated: boolean | number;
+    /** Lay the chart out at the host's width, so text keeps its size; set an object as a property for `compact` overrides. */
+    responsive: boolean | ResponsiveOptions;
+    private tip;
+    private overlay;
+    private portal;
+    private measured;
+    private viewState;
+    private highlightState;
+    private crossState;
+    private lastCross;
+    private observer;
+    private readonly pointers;
+    private hover;
+    private reported;
+    private readonly token;
+    private leave;
+    private joined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private focused;
+    private hiddenState;
+    private zoomState;
+    private selectedState;
+    private drag;
+    private layout;
+    /** The shared options, with the effective hidden series, zoom and selection, to spread into a layout input. */
+    protected sized(): {
+        width: number | undefined;
+        height: number | undefined;
+        animate: number | boolean;
+        responsive: boolean | ResponsiveOptions;
+        legend: boolean | LegendOptions;
+        tooltip: boolean | TooltipOptions;
+        format: Format | undefined;
+        palette: string[] | undefined;
+        loading: boolean;
+        error: string | undefined;
+        emptyMessage: string | undefined;
+        description: string | undefined;
+        decorative: boolean;
+        highlighted: ChartItemRef | ChartItemId | (ChartItemRef | ChartItemId)[] | null | undefined;
+        highlightScope: HighlightScope | undefined;
+        accessibleTable: boolean | AccessibleTableOptions;
+        hiddenSeries: string[];
+        zoom: Zoom | undefined;
+        selected: Selection | undefined;
+        view: MapView | undefined;
+    };
+    private emit;
+    private publish;
+    private join;
+    private setZoom;
+    private setView;
+    private setSelected;
+    private toggle;
+    private highlight;
+    private select;
+    private shareCrosshair;
+    private clearTip;
+    private canZoom;
+    private canPan;
+    private canEdit;
+    private brushing;
+    private viewBox;
+    /** The rendered `<svg>`, or `null` before the first render. */
+    getSvgElement(): SVGSVGElement | null;
+    /** The current layout: shapes, size, hit model. */
+    getLayout(): Canvas | undefined;
+    resetZoom(): void;
+    zoomTo(zoom: Zoom): void;
+    /** Moves keyboard focus to the first mark matching the ref; `false` when none matches. */
+    focusItem(ref: ChartItemRef): boolean;
+    /** SVG markup, a PNG blob, or CSV, through the core's `exportChart`. */
+    export(options: Omit<ChartExportOptions, 'label'> & {
+        label?: string;
+    }): Promise<string | Blob>;
+    private onPointerMove;
+    private onPointerDown;
+    private onPointerUp;
+    private onWheel;
+    private onClick;
+    private onKeyDown;
+    /** The accessible `<svg>` root: the layout's shapes, then the hover or keyboard tooltip. */
+    protected root(laidOut: Canvas, kind: string, label: string): TemplateResult;
+}
+/** The cartesian charts (bar, line, area): series and categories plus axes, references, stacking, zoom. */
+declare abstract class SkdxChartElement extends SkdxRootElement {
+    /** The plotted series; set as a property, not an attribute. */
+    series: (CartesianSeries | RangeSeries)[];
+    /** X-axis labels; numbers and dates are written with `xAxis.format`. */
+    categories: Category[] | undefined;
+    xAxis: XAxisOptions | undefined;
+    yAxis: AxisOptions | undefined;
+    /** Enables the second y axis; series opt in with `axis: 'right'`. */
+    rightAxis: AxisOptions | undefined;
+    /** Lines and bands in data coordinates: targets, SLAs, forecast periods. */
+    references: Reference[] | undefined;
+    /** Points, callouts, text and rectangles in data coordinates. */
+    annotations: Annotation[] | undefined;
+    /** Write each value next to its mark. */
+    labels: boolean;
+    curve: Curve | undefined;
+    connectNulls: boolean;
+    /** What a null does to a line: a gap, a bridge, or a zero. */
+    nulls: 'gap' | 'connect' | 'zero' | undefined;
+    /** Stack the series; `stacked="percent"` normalizes each category to 100%. */
+    stacked: boolean | 'percent';
+    /** Where stacks stand: zero, expand (100%), silhouette or wiggle (streamgraph). */
+    stackOffset: 'zero' | 'expand' | 'silhouette' | 'wiggle' | undefined;
+    orientation: 'vertical' | 'horizontal' | undefined;
+    /** Corner radius of bars. */
+    radius: number | undefined;
+    /** Share of each category slot left empty around its bars, 0–0.9. */
+    barGap: number | undefined;
+    /** Largest bar thickness in pixels. */
+    barWidth: number | undefined;
+    sort: 'asc' | 'desc' | undefined;
+    transform: 'histogram' | 'cumulative' | undefined;
+    /** Transforms applied to every series, in order. */
+    transforms: SeriesTransform[] | undefined;
+    bins: number | undefined;
+    binWidth: number | undefined;
+    binDomain: [number, number] | undefined;
+    binMode: 'count' | 'density' | 'cumulative' | undefined;
+    /** Point reduction for dense series: `auto` (default), `lttb`, `minmax`, `none`, or an object. */
+    sampling: Sampling | undefined;
+    /** Draw a range strip under the plot showing the whole series and the zoomed window. */
+    brush: boolean;
+    /** Snap the hover tooltip to the nearest category and list every series. */
+    crosshair: boolean;
+    /** The full cartesian layout input. */
+    protected input(): {
+        series: (CartesianSeries | RangeSeries)[];
+        categories: Category[] | undefined;
+        xAxis: XAxisOptions | undefined;
+        yAxis: AxisOptions | undefined;
+        rightAxis: AxisOptions | undefined;
+        references: Reference[] | undefined;
+        annotations: Annotation[] | undefined;
+        labels: boolean;
+        curve: Curve | undefined;
+        connectNulls: boolean;
+        nulls: "gap" | "connect" | "zero" | undefined;
+        stacked: boolean | "percent";
+        stackOffset: "zero" | "expand" | "silhouette" | "wiggle" | undefined;
+        orientation: "vertical" | "horizontal" | undefined;
+        radius: number | undefined;
+        barGap: number | undefined;
+        barWidth: number | undefined;
+        sort: "asc" | "desc" | undefined;
+        transform: "histogram" | "cumulative" | undefined;
+        transforms: SeriesTransform[] | undefined;
+        bins: number | undefined;
+        binWidth: number | undefined;
+        binDomain: [number, number] | undefined;
+        binMode: "cumulative" | "count" | "density" | undefined;
+        sampling: Sampling | undefined;
+        brush: boolean;
+        crosshair: boolean;
+        width: number | undefined;
+        height: number | undefined;
+        animate: number | boolean;
+        responsive: boolean | ResponsiveOptions;
+        legend: boolean | LegendOptions;
+        tooltip: boolean | TooltipOptions;
+        format: Format | undefined;
+        palette: string[] | undefined;
+        loading: boolean;
+        error: string | undefined;
+        emptyMessage: string | undefined;
+        description: string | undefined;
+        decorative: boolean;
+        highlighted: ChartItemRef | ChartItemId | (ChartItemRef | ChartItemId)[] | null | undefined;
+        highlightScope: HighlightScope | undefined;
+        accessibleTable: boolean | AccessibleTableOptions;
+        hiddenSeries: string[];
+        zoom: Zoom | undefined;
+        selected: Selection | undefined;
+        view: MapView | undefined;
+    };
+}
+
+/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */
+declare class SkdxAreaChart extends SkdxChartElement {
+    protected render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-area-chart': SkdxAreaChart;
+    }
+}
+
+export { type RangeChartSeries as $, type AccessibleTableOptions as A, type Band as B, type ChartItemRef as C, type Datum as D, type ErrorValue as E, type Format as F, type GanttTask as G, type HighlightScope as H, type IcicleInput as I, type MapLine as J, type MapPoint as K, type LegendOptions as L, type MapFeature as M, type MapView as N, type MarimekkoCategory as O, type MarimekkoChartInput as P, type MarkerSymbol as Q, type NetworkEdge as R, type NetworkNode as S, type OrganizationChartInput as T, type ParallelCoordinatesInput as U, type ParallelDimension as V, type ParallelRow as W, type PolarAreaChartInput as X, type RadarMetric as Y, type Zoom as Z, type RadialBand as _, type Annotation as a, csv as a$, type RangeSeries as a0, type Reference as a1, type Sampling as a2, type SankeyLink as a3, type SankeyNode as a4, type ScatterPoint as a5, type ScatterSeries as a6, type Selection as a7, type SelectionMode as a8, type Series as a9, SkdxPieChart as aA, SkdxPolarAreaChart as aB, SkdxRadarChart as aC, SkdxRadialBarChart as aD, SkdxRangeChart as aE, SkdxSankeyChart as aF, SkdxScatterChart as aG, SkdxSparkline as aH, SkdxSunburstChart as aI, SkdxSwarmPlot as aJ, SkdxTimelineChart as aK, SkdxTreeChart as aL, SkdxTreemap as aM, SkdxWaffleChart as aN, SkdxWaterfallChart as aO, type SwarmPlotInput as aP, type TaskChange as aQ, type TimelineChartInput as aR, type TimelineEvent as aS, type TooltipOptions as aT, type TreeChartInput as aU, type TreeNode as aV, type Value as aW, type Variant as aX, type WaffleChartInput as aY, type WaterfallDatum as aZ, type XAxisOptions as a_, type SeriesTransform as aa, SkdxAreaChart as ab, SkdxBarChart as ac, SkdxBoxplot as ad, SkdxBubbleChart as ae, SkdxBulletChart as af, SkdxBumpChart as ag, SkdxCandlestickChart as ah, SkdxChordChart as ai, SkdxCirclePackingChart as aj, SkdxComboChart as ak, SkdxDumbbellChart as al, SkdxFunnelChart as am, SkdxGanttChart as an, SkdxGaugeChart as ao, SkdxHeatmap as ap, SkdxHistogram as aq, SkdxIcicleChart as ar, SkdxLineChart as as, SkdxLinearGauge as at, SkdxMapChart as au, SkdxMarimekkoChart as av, SkdxNetworkChart as aw, SkdxOrganizationChart as ax, SkdxParallelCoordinatesChart as ay, SkdxParetoChart as az, type AxisOptions as b, exportChart as b0, seriesCsv as b1, svgMarkup as b2, type BoxSummary as c, type BoxplotSeries as d, type BubblePoint as e, type BubbleSeries as f, type BulletDatum as g, type BumpChartInput as h, type CalendarCell as i, type Candle as j, type CandlestickOverlay as k, type CartesianSeries as l, type Category as m, type ChartDataIssue as n, type ChartExportOptions as o, type ChartItem as p, type ChartItemId as q, type ChordLink as r, type CirclePackingInput as s, type ColorScale as t, type ComboSeries as u, type Curve as v, type DumbbellDatum as w, type GeoMultiPolygon as x, type GeoPolygon as y, type GroupedBoxSeries as z };