@bitforgehq/ui 0.3.0 → 0.3.2

package/types/bitforgehq-ui-charts.d.ts

@@ -0,0 +1,967 @@
+import * as i0 from "@angular/core";
+import { InjectionToken, Signal } from "@angular/core";
+/**
+ * One named row of values in a chart, one value per category; `null` leaves a gap.
+ *
+ * @summary One named series of chart values, one per category, null for a gap
+ * @since 0.3.1
+ */
+interface BfChartSeries {
+  /** The series name, shown in the legend, the tooltip and the data table. */
+  readonly name: string;
+  /** One value per category, in the categories' order; `null` where there is no value. */
+  readonly values: readonly (number | null)[];
+}
+/**
+ * Formats a chart value for the axis, the tooltip, the announcements and the data table.
+ *
+ * @summary Function that formats one chart value for axes, tooltips and the table
+ * @since 0.3.1
+ */
+type BfChartValueFormat = (value: number) => string;
+/**
+ * Where a chart draws its legend: above the plot, below it, or not at all.
+ *
+ * @summary The legend positions of a chart, above or below the plot, or none
+ * @since 0.3.1
+ */
+type BfChartLegendPosition = 'top' | 'bottom' | 'none';
+/**
+ * The line between two points of a line chart or a sparkline: straight, or a smooth monotone
+ * cubic curve that never overshoots the values.
+ *
+ * @summary The two line shapes, straight segments or a smooth monotone curve
+ * @since 0.3.1
+ */
+type BfChartCurve = 'linear' | 'smooth';
+/**
+ * One slice of a `bf-donut-chart`.
+ *
+ * @summary One labelled slice of a donut chart with its value
+ * @since 0.3.1
+ */
+interface BfDonutSlice {
+  /** The slice name, shown in the legend, the tooltip and the data table. */
+  readonly label: string;
+  /** The slice's value; its share of the total sets its angle. Zero and negative values draw no
+   * slice. */
+  readonly value: number;
+}
+/** A keyboard move of a chart's active point. */
+type ChartStep = 'previous' | 'next' | 'first' | 'last' | 'clear';
+/**
+ * The interaction state every chart with a legend and a tooltip shares: which series the legend
+ * hides, which category (or slice) is active, and the polite announcement of a keyboard move.
+ * A plain class, created once per chart component; it holds signals, no DOM and no services.
+ */
+declare class ChartInteraction {
+  private readonly hiddenSet;
+  private readonly activeIndex;
+  private readonly spoken;
+  /** The indexes the legend hides. */
+  readonly hidden: import("@angular/core").Signal<ReadonlySet<number>>;
+  /** The active category or slice, or `null` (no tooltip). */
+  readonly active: import("@angular/core").Signal<number | null>;
+  /** The last keyboard move, as read out by the live region. */
+  readonly announcement: import("@angular/core").Signal<string>;
+  /** Whether anything is active. */
+  readonly hasActive: import("@angular/core").Signal<boolean>;
+  /** Whether the legend hides series (or slice) `index`. */
+  isHidden(index: number): boolean;
+  /** Shows or hides series (or slice) `index`. */
+  toggle(index: number): void;
+  /** Points at `index` (a hover), without an announcement; `null` clears. */
+  point(index: number | null): void;
+  /**
+   * Moves the active point by keyboard among `targets` (the indexes that can be active, in order)
+   * and announces it with `describe`; `clear` hides the tooltip. From nothing, `next` and
+   * `previous` start at the first and the last target.
+   */
+  step(step: ChartStep, targets: readonly number[], describe: (index: number) => string): void;
+}
+/** One line of the tooltip: a swatch, a name and the formatted value. */
+interface ChartTooltipRow {
+  readonly name: string;
+  readonly value: string;
+  readonly swatch: string;
+}
+/** The tooltip of the active point: a title (the category), its rows and where it points, in
+ * px from the plot's physical top left. */
+interface ChartTooltip {
+  readonly title: string;
+  readonly rows: readonly ChartTooltipRow[];
+  readonly x: number;
+  readonly y: number;
+}
+/**
+ * The tooltip of a chart's active point, placed beside it inside the plot. Physical `left`: the
+ * plot's SVG coordinates are physical (the chart mirrors them under rtl), so the tooltip follows
+ * them; past the middle of the plot it flips to the point's other side, so it stays inside.
+ * Hidden from assistive technology: the live region reads the same values.
+ * @internal Not exported: used by the chart frame only.
+ */
+declare class BfChartTooltipComponent {
+  /** What the tooltip shows and where. */
+  readonly tip: import("@angular/core").InputSignal<ChartTooltip>;
+  /** The plot's width in px, to pick the side with room. */
+  readonly plotWidth: import("@angular/core").InputSignal<number>;
+  protected readonly hostClasses = "pointer-events-none absolute z-10 flex w-max min-w-32 max-w-60 flex-col gap-1 rounded-tile border border-border bg-surface px-3 py-2 text-caption text-text shadow-floating";
+  /** 12 px to the side with more room, centred on the point's height. */
+  protected readonly shift: import("@angular/core").Signal<string>;
+  /**
+   * A row's swatch classes.
+   * @internal
+   */
+  swatch(swatch: string): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChartTooltipComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChartTooltipComponent, "bf-chart-tooltip", never, {
+    "tip": {
+      "alias": "tip";
+      "required": true;
+      "isSignal": true;
+    };
+    "plotWidth": {
+      "alias": "plotWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** One legend entry: a series (or slice) name, its swatch utility and whether it is hidden. */
+interface ChartLegendItem {
+  readonly name: string;
+  readonly swatch: string;
+  readonly hidden: boolean;
+}
+/** The data as a table: the column headers, then one row per category (its first cell the
+ * category, a row header). */
+interface ChartTable {
+  readonly head: readonly string[];
+  readonly rows: readonly (readonly string[])[];
+}
+/** A pointer position in px from the plot's physical top left. */
+interface ChartPointer {
+  readonly x: number;
+  readonly y: number;
+}
+/**
+ * The shared figure around every chart's plot: the legend, the focusable plot with the tooltip,
+ * the polite live region, the Show data toggle and the data table. The chart draws its SVG into
+ * the default slot and owns every number; the frame only lays out and forwards input.
+ * @internal Not exported: used by the `/charts` components only.
+ */
+declare class BfChartFrameComponent {
+  /** The figure's accessible name. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The plot's height in px. */
+  readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The legend entries; none draws no legend. */
+  readonly legend: import("@angular/core").InputSignal<readonly ChartLegendItem[]>;
+  /** Where the legend goes. */
+  readonly legendPosition: import("@angular/core").InputSignal<BfChartLegendPosition>;
+  /** The active point's tooltip, or `null`. */
+  readonly tooltip: import("@angular/core").InputSignal<ChartTooltip | null>;
+  /** The live region's text: the last keyboard move. */
+  readonly announcement: import("@angular/core").InputSignal<string>;
+  /** The data as a table, for the Show data toggle. */
+  readonly table: import("@angular/core").InputSignal<ChartTable>;
+  /** Whether the Show data toggle is offered. */
+  readonly dataToggle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether Arrow Up and Down move too (categories that run down the plot). */
+  readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Emitted with the index of the legend entry pressed. */
+  readonly legendToggled: import("@angular/core").OutputEmitterRef<number>;
+  /** Emitted with the pointer's position over the plot (a hover, or a tap). */
+  readonly pointed: import("@angular/core").OutputEmitterRef<ChartPointer>;
+  /** Emitted when the pointer leaves the plot. */
+  readonly left: import("@angular/core").OutputEmitterRef<void>;
+  /** Emitted with a keyboard move of the active point. */
+  readonly stepped: import("@angular/core").OutputEmitterRef<ChartStep>;
+  /** Emitted with `true` when the plot takes focus and `false` when it loses it. */
+  readonly focusChanged: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  protected readonly tableId: string;
+  /** Whether the data table shows. */
+  protected readonly showData: import("@angular/core").WritableSignal<boolean>;
+  private readonly plot;
+  /** The plot element, which the chart measures. */
+  readonly plotElement: import("@angular/core").Signal<HTMLElement>;
+  /** The plot's width as last laid out, for the tooltip's side. */
+  protected plotWidth(): number;
+  protected readonly plotClasses = "relative block h-(--bf-chart-height) rounded-tile touch-pan-y focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring";
+  protected readonly legendClasses = "flex flex-wrap items-center gap-x-1 gap-y-1";
+  protected readonly legendButtonClasses: string;
+  protected readonly dataButtonClasses: string;
+  protected readonly tableClasses = "w-full border-collapse text-start";
+  protected readonly thHeadClasses = "h-8 border-b border-border px-3 text-start align-middle text-label-xs font-bold text-text-muted";
+  protected readonly thValueClasses = "h-8 border-b border-border px-3 text-start align-middle text-label-xs font-bold text-text-muted text-end";
+  protected readonly thRowClasses = "h-10 border-b border-divider px-3 text-start align-middle text-label-sm font-bold text-text";
+  protected readonly tdClasses = "h-10 border-b border-divider px-3 text-end align-middle text-label-sm font-medium text-text tabular-nums";
+  /**
+   * A swatch's classes: its colour, or an empty ring while hidden.
+   * @internal
+   */
+  swatchClasses(swatch: string, hidden: boolean): string;
+  /**
+   * Arrow keys (mirrored under `dir="rtl"`; Up and Down too for vertical categories), Home, End
+   * and Escape.
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Forwards the pointer's position over the plot.
+   * @internal
+   */
+  onPointer(event: PointerEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChartFrameComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChartFrameComponent, "bf-chart-frame", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": true;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+    "legendPosition": {
+      "alias": "legendPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "tooltip": {
+      "alias": "tooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "announcement": {
+      "alias": "announcement";
+      "required": false;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+    "dataToggle": {
+      "alias": "dataToggle";
+      "required": false;
+      "isSignal": true;
+    };
+    "vertical": {
+      "alias": "vertical";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "legendToggled": "legendToggled";
+    "pointed": "pointed";
+    "left": "left";
+    "stepped": "stepped";
+    "focusChanged": "focusChanged";
+  }, never, ["*"], true, never>;
+}
+/** A point in the plot's pixel space. */
+interface ChartPoint {
+  readonly x: number;
+  readonly y: number;
+}
+/** A coordinate rounded to 0.01 px, so a path stays short and its text stable. */
+declare function px(value: number): number;
+/** The runs of consecutive points between the gaps (`null`), each with at least one point. */
+declare function segments(points: readonly (ChartPoint | null)[]): ChartPoint[][];
+/**
+ * The SVG path of a line through `points`, broken at each gap; a run of one point is a dot-sized
+ * move with no line (the chart draws it as a marker). `smooth` is a monotone cubic curve.
+ */
+declare function linePath(points: readonly (ChartPoint | null)[], curve: BfChartCurve): string;
+/**
+ * The SVG path of the area between the line through `points` and the horizontal `baseline`, one
+ * closed shape per run between gaps.
+ */
+declare function areaPath(points: readonly (ChartPoint | null)[], curve: BfChartCurve, baseline: number): string;
+/** One drawn series: its index (the palette slot) and its line and area paths. */
+interface LineMark {
+  readonly index: number;
+  readonly line: string;
+  readonly area: string;
+  /** Points with no neighbour (between two gaps), drawn as dots so they show. */
+  readonly dots: readonly ChartPoint[];
+}
+/** A text label on an axis. */
+interface AxisLabel$1 {
+  readonly key: number;
+  readonly text: string;
+  readonly x: number;
+  readonly y: number;
+  readonly anchor: 'start' | 'middle' | 'end';
+}
+/**
+ * A line chart of one or more series over shared categories (months, days, steps), drawn in SVG
+ * with the chart palette: value axis with nice ticks and grid lines, a legend that shows and
+ * hides series, a crosshair tooltip on hover and on keyboard focus (Arrow keys move between the
+ * categories and a polite live region reads each one) and a Show data table. `area` fills under
+ * each line; `curve="smooth"` draws a monotone curve. The lines draw in on the first render and on
+ * every data change, still under reduced motion; under `dir="rtl"` the categories run from the
+ * right.
+ *
+ * @example
+ * <bf-line-chart
+ *   label="Revenue"
+ *   [categories]="['Jan', 'Feb', 'Mar']"
+ *   [series]="[{ name: 'Online', values: [12, 18, 15] }, { name: 'Store', values: [8, 9, 11] }]"
+ * />
+ * @summary Line chart of series over categories, with tooltip, legend and data table
+ * @category Data display
+ * @since 0.3.1
+ */
+export declare class BfLineChartComponent {
+  /** The series to draw, each with one value per category. */
+  readonly series: import("@angular/core").InputSignal<readonly BfChartSeries[]>;
+  /** The category names along the horizontal axis, in order. */
+  readonly categories: import("@angular/core").InputSignal<readonly string[]>;
+  /** The chart's accessible name; empty falls back to the `bf-chart-card` title, then to
+   * `provideBfLabels()`'s `chart` ("Chart"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The plot's height in px; the width follows the container. */
+  readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Fills the area under each line in the series' colour (the value axis then starts at zero). */
+  readonly area: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The line between points: `linear` (default) or `smooth`, a monotone curve. */
+  readonly curve: import("@angular/core").InputSignal<BfChartCurve>;
+  /** Formats the values on the axis, in the tooltip and in the table; unset uses
+   * `Intl.NumberFormat` in the document's language. */
+  readonly valueFormat: import("@angular/core").InputSignal<BfChartValueFormat | undefined>;
+  /** Where the legend goes; unset follows the `bf-chart-card`, else `bottom`. A single series
+   * draws no legend. */
+  readonly legend: import("@angular/core").InputSignal<BfChartLegendPosition | undefined>;
+  protected readonly interaction: ChartInteraction;
+  private readonly labels;
+  private readonly card;
+  private readonly document;
+  private readonly frame;
+  private readonly box;
+  protected readonly axisTextClasses = "fill-text-muted text-micro";
+  /** The figure's name: `label`, else the card's title, else the `chart` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly legendPosition: import("@angular/core").Signal<BfChartLegendPosition>;
+  private readonly format;
+  /** A new array on every data change: the key that re-creates the marks. */
+  protected readonly generations: import("@angular/core").Signal<{
+    series: readonly BfChartSeries[];
+    categories: readonly string[];
+  }[]>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  /** The indexes of the series the legend shows. */
+  private readonly visible;
+  /** Everything the SVG draws, in px of the plot's physical box. */
+  protected readonly geometry: import("@angular/core").Signal<{
+    width: number;
+    top: number;
+    baseline: number;
+    left: number;
+    right: number;
+    ticks: AxisLabel$1[];
+    categoryLabels: AxisLabel$1[];
+    marks: LineMark[];
+    xAt: (i: number) => number;
+    yAt: (v: number) => number;
+  }>;
+  /** The legend: every series, or none for a single series. */
+  protected readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  /** The active category, within range. */
+  private readonly active;
+  protected readonly crosshairX: import("@angular/core").Signal<number | null>;
+  protected readonly markers: import("@angular/core").Signal<{
+    index: number;
+    x: number;
+    y: number;
+  }[]>;
+  protected readonly tooltip: import("@angular/core").Signal<ChartTooltip | null>;
+  protected readonly table: import("@angular/core").Signal<ChartTable>;
+  /**
+   * The stroke classes of series `index`'s line.
+   * @internal
+   */
+  lineClasses(index: number): string;
+  /**
+   * The fill classes of series `index`'s area.
+   * @internal
+   */
+  areaClasses(index: number): string;
+  /**
+   * The fill of series `index`'s lone dots.
+   * @internal
+   */
+  dotClasses(index: number): string;
+  /**
+   * The ring of series `index`'s hover marker.
+   * @internal
+   */
+  markerClasses(index: number): string;
+  /**
+   * Points at the category nearest the pointer.
+   * @internal
+   */
+  onPointed(pointer: ChartPointer): void;
+  /**
+   * Moves the active category by keyboard and announces it.
+   * @internal
+   */
+  onStep(step: ChartStep): void;
+  /**
+   * On focus, shows the first category (or keeps the hovered one); on blur, hides the tooltip.
+   * @internal
+   */
+  onFocus(focused: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfLineChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfLineChartComponent, "bf-line-chart", never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "area": {
+      "alias": "area";
+      "required": false;
+      "isSignal": true;
+    };
+    "curve": {
+      "alias": "curve";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormat": {
+      "alias": "valueFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * The direction of a `bf-bar-chart`'s bars: up from a horizontal baseline, or along from a
+ * vertical one (for long category names or many categories).
+ *
+ * @summary The two bar directions, vertical columns or horizontal bars
+ * @since 0.3.1
+ */
+type BfBarChartOrientation = 'vertical' | 'horizontal';
+declare const GROW: Record<'up' | 'down' | 'left' | 'right', string>;
+/** One bar (or stacked segment) in px of the plot's physical box. */
+interface BarMark {
+  readonly key: string;
+  readonly index: number;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly grow: keyof typeof GROW;
+}
+/** A text label on an axis. */
+interface AxisLabel {
+  readonly key: number;
+  readonly text: string;
+  readonly x: number;
+  readonly y: number;
+  readonly anchor: 'start' | 'middle' | 'end';
+}
+/** A grid line from (x1, y1) to (x2, y2). */
+interface GridLine {
+  readonly key: number;
+  readonly x1: number;
+  readonly y1: number;
+  readonly x2: number;
+  readonly y2: number;
+}
+/**
+ * A bar chart of one or more series over shared categories, drawn in SVG with the chart palette:
+ * bars side by side per category (or `stacked`), up from the baseline (or `horizontal`, along
+ * from it), with a value axis of nice ticks, a legend that shows and hides series, a tooltip on
+ * hover and on keyboard focus (Arrow keys move between the categories and a polite live region
+ * reads each one) and a Show data table. Bars grow in on the first render and on every data
+ * change, still under reduced motion; under `dir="rtl"` the horizontal axis runs from the right.
+ *
+ * @example
+ * <bf-bar-chart
+ *   label="Tickets"
+ *   [categories]="['Mon', 'Tue', 'Wed']"
+ *   [series]="[{ name: 'Opened', values: [14, 9, 12] }, { name: 'Closed', values: [11, 12, 8] }]"
+ * />
+ * @summary Bar chart of series over categories, grouped or stacked, vertical or horizontal
+ * @category Data display
+ * @since 0.3.1
+ */
+export declare class BfBarChartComponent {
+  /** The series to draw, each with one value per category. */
+  readonly series: import("@angular/core").InputSignal<readonly BfChartSeries[]>;
+  /** The category names along the category axis, in order. */
+  readonly categories: import("@angular/core").InputSignal<readonly string[]>;
+  /** The chart's accessible name; empty falls back to the `bf-chart-card` title, then to
+   * `provideBfLabels()`'s `chart` ("Chart"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The plot's height in px; the width follows the container. */
+  readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** `vertical` (default) bars rise from a horizontal baseline; `horizontal` bars run along from
+   * a vertical one, the categories down the start side. */
+  readonly orientation: import("@angular/core").InputSignal<BfBarChartOrientation>;
+  /** Stacks the series of a category into one bar instead of side by side. */
+  readonly stacked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Formats the values on the axis, in the tooltip and in the table; unset uses
+   * `Intl.NumberFormat` in the document's language. */
+  readonly valueFormat: import("@angular/core").InputSignal<BfChartValueFormat | undefined>;
+  /** Where the legend goes; unset follows the `bf-chart-card`, else `bottom`. A single series
+   * draws no legend. */
+  readonly legend: import("@angular/core").InputSignal<BfChartLegendPosition | undefined>;
+  protected readonly interaction: ChartInteraction;
+  private readonly labels;
+  private readonly card;
+  private readonly document;
+  private readonly frame;
+  private readonly box;
+  protected readonly axisTextClasses = "fill-text-muted text-micro";
+  /** The figure's name: `label`, else the card's title, else the `chart` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly legendPosition: import("@angular/core").Signal<BfChartLegendPosition>;
+  private readonly format;
+  /** A new array on every data change: the key that re-creates the bars. */
+  protected readonly generations: import("@angular/core").Signal<{
+    series: readonly BfChartSeries[];
+    categories: readonly string[];
+    stacked: boolean;
+  }[]>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  private readonly visible;
+  /** The value range the bars span: from zero, per bar or per stack. */
+  private readonly extent;
+  /** Everything the SVG draws, in px of the plot's physical box. */
+  protected readonly geometry: import("@angular/core").Signal<{
+    bars: BarMark[];
+    grid: GridLine[];
+    axis: {
+      x1: number;
+      x2: number;
+      y1: number;
+      y2: number;
+    };
+    labels: AxisLabel[];
+    horizontal: boolean;
+    rtl: boolean;
+    width: number;
+    start: number;
+    plotWidth: number;
+    plotHeight: number;
+    bandSize: number;
+    bandStart: (j: number) => number;
+    zero: number;
+  }>;
+  protected readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  /** The active category, within range. */
+  private readonly active;
+  /** The highlight band behind the active category. */
+  protected readonly activeBand: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>;
+  protected readonly tooltip: import("@angular/core").Signal<ChartTooltip | null>;
+  protected readonly table: import("@angular/core").Signal<ChartTable>;
+  /**
+   * The classes of one bar: its series colour and its grow motion.
+   * @internal
+   */
+  barClasses(bar: BarMark): string;
+  /**
+   * Points at the category under the pointer.
+   * @internal
+   */
+  onPointed(pointer: ChartPointer): void;
+  /**
+   * Moves the active category by keyboard and announces it.
+   * @internal
+   */
+  onStep(step: ChartStep): void;
+  /**
+   * On focus, shows the first category (or keeps the hovered one); on blur, hides the tooltip.
+   * @internal
+   */
+  onFocus(focused: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfBarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfBarChartComponent, "bf-bar-chart", never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "stacked": {
+      "alias": "stacked";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormat": {
+      "alias": "valueFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** One drawn slice: its index (the palette slot), its arc and its angles (0 at the top,
+ * clockwise, in radians). */
+interface SliceMark {
+  readonly index: number;
+  readonly d: string;
+  readonly start: number;
+  readonly end: number;
+}
+/**
+ * A donut chart of one set of slices, the parts of a whole (a budget by category, traffic by
+ * source), drawn in SVG with the chart palette: each slice's angle is its share of the total.
+ * A legend shows and hides slices (the total follows), a tooltip shows a slice's value and share
+ * on hover and on keyboard focus (Arrow keys move between the slices and a polite live region
+ * reads each one), and a Show data table lists them. The `center` slot holds a total or a label
+ * in the ring's hole. Slices draw in on the first render and on every data change, still under
+ * reduced motion; under `dir="rtl"` the slices run counter-clockwise.
+ *
+ * @example
+ * <bf-donut-chart
+ *   label="Budget"
+ *   [slices]="[{ label: 'Rent', value: 1200 }, { label: 'Food', value: 450 }]"
+ * >
+ *   <span bfSlot="center" class="text-title">1,650</span>
+ * </bf-donut-chart>
+ * @summary Donut chart of the parts of a whole, with a legend, tooltip and centre slot
+ * @category Data display
+ * @since 0.3.1
+ * @slot center Content in the ring's hole, such as the total and its label.
+ */
+export declare class BfDonutChartComponent {
+  /** The slices, in order clockwise from the top. */
+  readonly slices: import("@angular/core").InputSignal<readonly BfDonutSlice[]>;
+  /** The chart's accessible name; empty falls back to the `bf-chart-card` title, then to
+   * `provideBfLabels()`'s `chart` ("Chart"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The plot's height in px; the ring fits the smaller of it and the container's width. */
+  readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The ring's thickness in px (at most the radius, a full pie). */
+  readonly thickness: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Formats the values in the tooltip, the announcements and the table; unset uses
+   * `Intl.NumberFormat` in the document's language. */
+  readonly valueFormat: import("@angular/core").InputSignal<BfChartValueFormat | undefined>;
+  /** Where the legend goes; unset follows the `bf-chart-card`, else `bottom`. A single slice
+   * draws no legend. */
+  readonly legend: import("@angular/core").InputSignal<BfChartLegendPosition | undefined>;
+  protected readonly interaction: ChartInteraction;
+  private readonly labels;
+  private readonly card;
+  private readonly document;
+  private readonly frame;
+  private readonly box;
+  private readonly percent;
+  protected readonly growBy = 6;
+  /** The figure's name: `label`, else the card's title, else the `chart` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly legendPosition: import("@angular/core").Signal<BfChartLegendPosition>;
+  private readonly format;
+  /** A new array on every data change: the key that re-creates the slices. */
+  protected readonly generations: import("@angular/core").Signal<{
+    slices: readonly BfDonutSlice[];
+  }[]>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  /** The indexes of the slices drawn: shown in the legend, with a positive value. */
+  private readonly drawn;
+  /** The total of the drawn slices. */
+  private readonly total;
+  /** Slice `index`'s positive, finite value, else 0. */
+  private share;
+  /** The ring and its arcs, in px of the plot's physical box. */
+  protected readonly geometry: import("@angular/core").Signal<{
+    width: number;
+    cx: number;
+    cy: number;
+    r: number;
+    thickness: number;
+    rtl: boolean;
+    slices: SliceMark[];
+    at: (angle: number, radius?: number) => {
+      x: number;
+      y: number;
+    };
+  }>;
+  protected readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  /** The active slice, if it is drawn. */
+  protected readonly active: import("@angular/core").Signal<number | null>;
+  /** "Rent: 1,200 (73%)", the value of slice `index` with its share. */
+  private valueText;
+  protected readonly tooltip: import("@angular/core").Signal<ChartTooltip | null>;
+  protected readonly table: import("@angular/core").Signal<ChartTable>;
+  /**
+   * The stroke classes of slice `index`.
+   * @internal
+   */
+  sliceClasses(index: number): string;
+  /**
+   * Points at the slice under the pointer, or at none off the ring.
+   * @internal
+   */
+  onPointed(pointer: ChartPointer): void;
+  /**
+   * Moves the active slice by keyboard and announces it.
+   * @internal
+   */
+  onStep(step: ChartStep): void;
+  /**
+   * On focus, shows the first slice (or keeps the hovered one); on blur, hides the tooltip.
+   * @internal
+   */
+  onFocus(focused: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfDonutChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfDonutChartComponent, "bf-donut-chart", never, {
+    "slices": {
+      "alias": "slices";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "thickness": {
+      "alias": "thickness";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormat": {
+      "alias": "valueFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=center]"], true, never>;
+}
+/**
+ * A tiny line of one series with no axes, legend or tooltip, for a trend beside a figure (in a
+ * `bf-stat`'s supporting line, a table cell). Its scale spans the values' own range, so it shows
+ * the shape of the trend, not its size; a dot marks the latest value. With a `label` it is an
+ * image with that name (say what the trend means, such as "Revenue up 12% over 30 days"); without
+ * one it is decorative and hidden from assistive technology. It draws in on the first render and
+ * on every data change, still under reduced motion; under `dir="rtl"` it runs from the right.
+ *
+ * @example
+ * <bf-stat label="Revenue" value="$48,200">
+ *   <bf-sparkline [values]="[31, 34, 33, 39, 42, 48]" label="Revenue rising over six months" />
+ * </bf-stat>
+ * @summary Tiny trend line with no axes or legend, for stats and table cells
+ * @category Data display
+ * @since 0.3.1
+ */
+export declare class BfSparklineComponent {
+  /** The values in order, oldest first; `null` leaves a gap. */
+  readonly values: import("@angular/core").InputSignal<readonly (number | null)[]>;
+  /** What the trend means, its accessible name ("Revenue up 12% this month"); empty makes the
+   * sparkline decorative. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Height in px; the width follows the container. */
+  readonly height: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Fills the area under the line. */
+  readonly area: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The line between points: `linear` (default) or `smooth`, a monotone curve. */
+  readonly curve: import("@angular/core").InputSignal<BfChartCurve>;
+  private readonly host;
+  private readonly box;
+  protected readonly lineClasses = "fill-none stroke-chart-1 [stroke-dasharray:1] animate-chart-draw motion-reduce:animate-none";
+  protected readonly areaClasses = "fill-chart-1/16 stroke-none animate-chart-fade motion-reduce:animate-none";
+  protected readonly dotClasses = "fill-chart-1 animate-chart-fade motion-reduce:animate-none";
+  /** A new array on every data change: the key that re-creates the line. */
+  protected readonly generations: import("@angular/core").Signal<{
+    values: readonly (number | null)[];
+  }[]>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly geometry: import("@angular/core").Signal<{
+    line: string;
+    area: string;
+    last: {
+      x: number;
+      y: number;
+    } | null;
+  }>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSparklineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSparklineComponent, "bf-sparkline", never, {
+    "values": {
+      "alias": "values";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "area": {
+      "alias": "area";
+      "required": false;
+      "isSignal": true;
+    };
+    "curve": {
+      "alias": "curve";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** What a `bf-chart-card` hands the chart inside it: its title and its legend placement. */
+interface ChartCardHost {
+  /** The card's title, the chart's name when the chart has no `label`. */
+  readonly title: Signal<string>;
+  /** The card's legend placement, used when the chart sets none. */
+  readonly legend: Signal<BfChartLegendPosition>;
+}
+/** Provided by `bf-chart-card` for the chart it holds. */
+declare const BF_CHART_CARD: InjectionToken<ChartCardHost>;
+/**
+ * The heading level of a `bf-chart-card` title: `2` for a card on a page, `3` inside a section.
+ *
+ * @summary Heading level of a chart card title, two on a page or three inside
+ * @since 0.3.1
+ */
+type BfChartCardHeadingLevel = 2 | 3;
+/**
+ * A card around one chart: a title, a `period` slot for the range control (a `bf-segmented` or a
+ * `bf-select`), and the chart, or its loading placeholder (a `bf-skeleton`), its empty state or
+ * its error. The chart inside takes the card's title as its name when it has no `label`, and the
+ * card's `legend` placement when it sets none.
+ *
+ * @example
+ * <bf-chart-card title="Revenue" [loading]="revenue.isLoading()">
+ *   <bf-segmented bfSlot="period" label="Period" [options]="periods" [(value)]="period" />
+ *   <bf-line-chart [series]="series()" [categories]="months()" />
+ * </bf-chart-card>
+ * @summary Card around one chart with a title, period control and loading, empty and error states
+ * @category Data display
+ * @since 0.3.1
+ * @slot default The chart.
+ * @slot period The range control at the top end, such as a bf-segmented or a bf-select.
+ * @slot empty What shows when `empty` is set; without it, the `chartEmpty` label.
+ * @slot error What shows when `error` is set, such as a message and a retry button; without it,
+ *   the `chartError` label.
+ */
+export declare class BfChartCardComponent implements ChartCardHost {
+  /** The card's heading; also the chart's name when the chart has no `label`. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Heading level of the title so the card fits the page outline. */
+  readonly headingLevel: import("@angular/core").InputSignal<BfChartCardHeadingLevel>;
+  /** Where the chart inside draws its legend, unless it sets its own `legend`. */
+  readonly legend: import("@angular/core").InputSignal<BfChartLegendPosition>;
+  /** Shows a placeholder instead of the chart while its data loads, and marks the body
+   * `aria-busy`. */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the `empty` slot (or the `chartEmpty` label) instead of the chart: there is no data
+   * for the period. */
+  readonly empty: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the `error` slot (or the `chartError` label) instead of the chart: the data failed to
+   * load. Wins over `empty`; `loading` wins over both. */
+  readonly error: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  protected readonly hostClasses = "flex h-full min-w-0 flex-col gap-4 rounded-card border-[1.5px] border-border-strong bg-surface p-card text-start text-text";
+  protected readonly stateClasses = "flex min-h-60 flex-col items-center justify-center gap-2 rounded-tile text-center text-body text-text-muted";
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChartCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChartCardComponent, "bf-chart-card", never, {
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "empty": {
+      "alias": "empty";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=period]", "[bfSlot=error]", "[bfSlot=empty]", "*"], true, never>;
+}
+export type { BfBarChartOrientation, BfChartCardHeadingLevel, BfChartCurve, BfChartLegendPosition, BfChartSeries, BfChartValueFormat, BfDonutSlice };