@neuravision/ng-construct 0.8.0 → 0.9.0

package/fesm2022/neuravision-ng-construct.mjs

@@ -11303,6 +11303,2291 @@ function cssAttrEscape(value) {
     return value.replace(/(["\\])/g, '\\$1');
 }
 
+/**
+ * Shared data contracts for the `af-*-chart` family.
+ *
+ * The shapes mirror the dashboard stats DTO (`{ value, delta, series, breakdown }`)
+ * so server aggregates map onto the charts with no client-side reshaping:
+ * a time/category series feeds {@link AfChartSeries}, a breakdown feeds
+ * {@link AfChartDatum}.
+ */
+/** Maximum number of distinct palette colours before they repeat. */
+const AF_CHART_PALETTE_SIZE = 8;
+
+/**
+ * Accessible data-table equivalent of a chart, rendered as a real semantic
+ * `<table>`. Every `af-*-chart` embeds one inside `.ct-chart__table-wrap`, which
+ * keeps it visually hidden but available to assistive technology by default and
+ * reveals it when the consumer toggles `.ct-chart--show-table`.
+ *
+ * This guarantees the chart's information is never conveyed by colour or shape
+ * alone (WCAG 1.4.1) and gives screen-reader and keyboard users the exact values.
+ *
+ * @docs-private — consumers use it indirectly via the chart components.
+ */
+class AfChartDataTableComponent {
+    /** Table model (caption, headers, rows) describing the chart's data. */
+    model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfChartDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfChartDataTableComponent, isStandalone: true, selector: "af-chart-data-table", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (model(); as m) {
+      <table class="ct-chart__table">
+        <caption>{{ m.caption }}</caption>
+        <thead>
+          <tr>
+            @for (header of m.headers; track $index) {
+              <th scope="col">{{ header }}</th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of m.rows; track $index) {
+            <tr>
+              @for (cell of row; track $index) {
+                @if ($first) {
+                  <th scope="row">{{ cell }}</th>
+                } @else {
+                  <td>{{ cell }}</td>
+                }
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfChartDataTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-chart-data-table',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents' },
+                    template: `
+    @if (model(); as m) {
+      <table class="ct-chart__table">
+        <caption>{{ m.caption }}</caption>
+        <thead>
+          <tr>
+            @for (header of m.headers; track $index) {
+              <th scope="col">{{ header }}</th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of m.rows; track $index) {
+            <tr>
+              @for (cell of row; track $index) {
+                @if ($first) {
+                  <th scope="row">{{ cell }}</th>
+                } @else {
+                  <td>{{ cell }}</td>
+                }
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `,
+                }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }] } });
+
+/**
+ * Injection token to override the chart components' screen-reader and control
+ * strings. Libraries ship English defaults; consumers translate via DI.
+ *
+ * @example
+ * providers: [{
+ *   provide: AF_CHART_I18N,
+ *   useValue: {
+ *     showTable: 'Daten als Tabelle anzeigen',
+ *     hideTable: 'Tabelle ausblenden',
+ *     noData: 'Keine Daten',
+ *     valueHeader: 'Wert',
+ *     categoryHeader: 'Kategorie',
+ *     seriesHeader: 'Datenreihe',
+ *     percentHeader: 'Anteil',
+ *     tableSuffix: 'Datentabelle unterhalb des Diagramms verfügbar.',
+ *   },
+ * }]
+ */
+const AF_CHART_I18N = new InjectionToken('AfChartI18n', {
+    factory: () => ({
+        showTable: 'Show data table',
+        hideTable: 'Hide data table',
+        noData: 'No data available',
+        valueHeader: 'Value',
+        categoryHeader: 'Category',
+        seriesHeader: 'Series',
+        percentHeader: 'Share',
+        tableSuffix: 'A data table is available below the chart.',
+        sparklineSummary: '{label}: {count} points, min {min}, max {max}, latest {last}.',
+    }),
+});
+
+/**
+ * Pure, dependency-free geometry helpers shared by the chart components.
+ *
+ * Everything here is SSR-safe: no DOM, no `window`, no `Date`. Inputs and
+ * outputs are plain numbers and strings so the functions are trivially unit
+ * testable and reusable across line, bar, donut, sparkline and gauge charts.
+ */
+/** Clamp `value` into the inclusive `[min, max]` range. */
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * Round `value` to at most `decimals` significant fractional digits, dropping
+ * floating-point noise (e.g. `0.30000000000000004` → `0.3`).
+ */
+function roundTo(value, decimals = 6) {
+    const factor = 10 ** decimals;
+    return Math.round(value * factor) / factor;
+}
+/** Round a candidate axis range/step to a visually "nice" 1/2/5×10ⁿ value. */
+function niceNum(range, round) {
+    const exponent = Math.floor(Math.log10(range));
+    const fraction = range / 10 ** exponent;
+    let niceFraction;
+    if (round) {
+        if (fraction < 1.5)
+            niceFraction = 1;
+        else if (fraction < 3)
+            niceFraction = 2;
+        else if (fraction < 7)
+            niceFraction = 5;
+        else
+            niceFraction = 10;
+    }
+    else if (fraction <= 1)
+        niceFraction = 1;
+    else if (fraction <= 2)
+        niceFraction = 2;
+    else if (fraction <= 5)
+        niceFraction = 5;
+    else
+        niceFraction = 10;
+    return niceFraction * 10 ** exponent;
+}
+/**
+ * Compute a "nice" axis domain and evenly spaced ticks covering `[min, max]`.
+ * Always returns at least two ticks and never loops infinitely on degenerate
+ * (equal or inverted) inputs.
+ *
+ * @param maxTicks Upper bound on the number of ticks (≥ 2). Default 5.
+ */
+function niceScale(min, max, maxTicks = 5) {
+    const safeTicks = Math.max(2, Math.floor(maxTicks));
+    let lo = Math.min(min, max);
+    let hi = Math.max(min, max);
+    if (lo === hi) {
+        // Degenerate range — pad symmetrically so we still draw a usable axis.
+        const pad = Math.abs(lo) > 0 ? Math.abs(lo) * 0.5 : 1;
+        lo -= pad;
+        hi += pad;
+    }
+    const range = niceNum(hi - lo, false);
+    const step = niceNum(range / (safeTicks - 1), true) || 1;
+    const niceMin = Math.floor(lo / step) * step;
+    const niceMax = Math.ceil(hi / step) * step;
+    const ticks = [];
+    for (let v = niceMin; v <= niceMax + step * 0.5; v += step) {
+        ticks.push(roundTo(v));
+    }
+    return { min: niceMin, max: niceMax, ticks };
+}
+/**
+ * Build a linear mapping from a data domain to a pixel range.
+ * Returns the identity-safe scale `(value) => pixel`.
+ */
+function scaleLinear(domainMin, domainMax, rangeMin, rangeMax) {
+    const domainSpan = domainMax - domainMin || 1;
+    const rangeSpan = rangeMax - rangeMin;
+    return (value) => rangeMin + ((value - domainMin) / domainSpan) * rangeSpan;
+}
+/** Build an SVG path (`M`/`L`) through `points`. Empty input yields `''`. */
+function buildLinePath(points) {
+    if (points.length === 0)
+        return '';
+    return points
+        .map((p, i) => `${i === 0 ? 'M' : 'L'}${roundTo(p.x, 2)} ${roundTo(p.y, 2)}`)
+        .join(' ');
+}
+/**
+ * Build a closed area path from `points` down to `baselineY`.
+ * Used for area charts and sparkline fills.
+ */
+function buildAreaPath(points, baselineY) {
+    if (points.length === 0)
+        return '';
+    const first = points[0];
+    const last = points[points.length - 1];
+    const top = points
+        .map((p, i) => `${i === 0 ? 'M' : 'L'}${roundTo(p.x, 2)} ${roundTo(p.y, 2)}`)
+        .join(' ');
+    return (`${top} L${roundTo(last.x, 2)} ${roundTo(baselineY, 2)} ` +
+        `L${roundTo(first.x, 2)} ${roundTo(baselineY, 2)} Z`);
+}
+/** Convert a polar coordinate (degrees, 0° = 12 o'clock, clockwise) to cartesian. */
+function polarToCartesian(cx, cy, radius, angleDeg) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+}
+/**
+ * Build a filled donut/pie slice path between two angles (clockwise, degrees).
+ * Pass `innerRadius = 0` for a full pie slice.
+ */
+function donutSlicePath(cx, cy, outerRadius, innerRadius, startAngle, endAngle) {
+    const sweep = endAngle - startAngle;
+    // A full circle can't be expressed as a single arc — split into two halves.
+    if (sweep >= 359.999) {
+        const mid = startAngle + 180;
+        return (donutSlicePath(cx, cy, outerRadius, innerRadius, startAngle, mid) +
+            ' ' +
+            donutSlicePath(cx, cy, outerRadius, innerRadius, mid, endAngle));
+    }
+    const largeArc = sweep > 180 ? 1 : 0;
+    const oStart = polarToCartesian(cx, cy, outerRadius, startAngle);
+    const oEnd = polarToCartesian(cx, cy, outerRadius, endAngle);
+    if (innerRadius <= 0) {
+        return (`M${roundTo(cx, 2)} ${roundTo(cy, 2)} ` +
+            `L${roundTo(oStart.x, 2)} ${roundTo(oStart.y, 2)} ` +
+            `A${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${roundTo(oEnd.x, 2)} ${roundTo(oEnd.y, 2)} Z`);
+    }
+    const iEnd = polarToCartesian(cx, cy, innerRadius, endAngle);
+    const iStart = polarToCartesian(cx, cy, innerRadius, startAngle);
+    return (`M${roundTo(oStart.x, 2)} ${roundTo(oStart.y, 2)} ` +
+        `A${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${roundTo(oEnd.x, 2)} ${roundTo(oEnd.y, 2)} ` +
+        `L${roundTo(iEnd.x, 2)} ${roundTo(iEnd.y, 2)} ` +
+        `A${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${roundTo(iStart.x, 2)} ${roundTo(iStart.y, 2)} Z`);
+}
+/** Build a stroked arc path (no fill) between two angles — used by the gauge. */
+function arcPath(cx, cy, radius, startAngle, endAngle) {
+    const start = polarToCartesian(cx, cy, radius, startAngle);
+    const end = polarToCartesian(cx, cy, radius, endAngle);
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+    return (`M${roundTo(start.x, 2)} ${roundTo(start.y, 2)} ` +
+        `A${radius} ${radius} 0 ${largeArc} 1 ${roundTo(end.x, 2)} ${roundTo(end.y, 2)}`);
+}
+/**
+ * Locale-aware number formatting via the `Intl` API (SSR-safe).
+ * Falls back to `String(value)` if `Intl` is unavailable or throws.
+ */
+function formatNumber(value, locale, options) {
+    try {
+        return new Intl.NumberFormat(locale, options).format(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+
+let nextLineChartUid = 0;
+const VIEW_WIDTH$3 = 640;
+const MARGIN$2 = { top: 12, right: 16, bottom: 28, left: 48 };
+const MAX_X_LABELS = 12;
+/**
+ * Accessible line / area chart for time-series and trend data.
+ *
+ * Renders one or more {@link AfChartSeries} over a shared category axis as an
+ * SVG. Geometry is computed with the SSR-safe `chart-geometry` helpers — no DOM,
+ * `window`, or `Date` access — so it renders identically on the server.
+ *
+ * @example Single trend line
+ * <af-line-chart
+ *   ariaLabel="Revenue, last 30 days"
+ *   [categories]="days"
+ *   [series]="[{ name: 'Revenue', values: revenue }]" />
+ *
+ * @example Multi-series area chart
+ * <af-line-chart
+ *   ariaLabel="AI cost by origin"
+ *   [categories]="weeks"
+ *   [series]="[
+ *     { name: 'Analyzer', values: analyzer },
+ *     { name: 'Resolver', values: resolver },
+ *   ]"
+ *   [area]="true" />
+ *
+ * @accessibility
+ * - The SVG carries `role="img"` and an `aria-label` describing the chart, with
+ *   a pointer to the always-present data-table fallback.
+ * - A visually-hidden {@link AfChartDataTableComponent} mirrors every value so
+ *   information is never conveyed by colour alone (WCAG 1.4.1); a toggle reveals it.
+ * - Each series is labelled in the legend, so colour is never the sole carrier.
+ * - Series colours come from the contrast-checked `--color-chart-series-*` tokens.
+ * - All user-facing strings are configurable via {@link AF_CHART_I18N}.
+ */
+class AfLineChartComponent {
+    i18n = inject(AF_CHART_I18N);
+    margin = MARGIN$2;
+    viewWidth = VIEW_WIDTH$3;
+    tableId = `af-line-chart-${nextLineChartUid++}`;
+    /** Accessible chart label (required by the WAI-ARIA `img` role). */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** X-axis category labels (e.g. dates). Series values align 1:1 with these. */
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    /** One or more data series sharing the category axis. */
+    series = input.required(...(ngDevMode ? [{ debugName: "series" }] : []));
+    /** Fill the area beneath each line. */
+    area = input(false, { ...(ngDevMode ? { debugName: "area" } : {}), transform: booleanAttribute });
+    /** Render point markers on each value. */
+    showDots = input(true, { ...(ngDevMode ? { debugName: "showDots" } : {}), transform: booleanAttribute });
+    /** Show the series legend. */
+    showLegend = input(true, { ...(ngDevMode ? { debugName: "showLegend" } : {}), transform: booleanAttribute });
+    /** Chart height in viewBox units (width is fluid). */
+    height = input(280, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** Force the y-axis minimum; defaults to a nice value derived from the data. */
+    yMin = input(null, ...(ngDevMode ? [{ debugName: "yMin" }] : []));
+    /** Force the y-axis maximum; defaults to a nice value derived from the data. */
+    yMax = input(null, ...(ngDevMode ? [{ debugName: "yMax" }] : []));
+    /** BCP-47 locale for number formatting (e.g. `'de-DE'`). */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /** `Intl.NumberFormat` options for axis and value formatting. */
+    valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
+    /** Whether the data-table fallback starts visible. */
+    showTableInitially = input(false, { ...(ngDevMode ? { debugName: "showTableInitially" } : {}), transform: booleanAttribute });
+    tableOverride = signal(null, ...(ngDevMode ? [{ debugName: "tableOverride" }] : []));
+    tableVisible = computed(() => this.tableOverride() ?? this.showTableInitially(), ...(ngDevMode ? [{ debugName: "tableVisible" }] : []));
+    hasData = computed(() => this.categories().length > 0 &&
+        this.series().some((s) => s.values.some((v) => v != null)), ...(ngDevMode ? [{ debugName: "hasData" }] : []));
+    viewBox = computed(() => `0 0 ${VIEW_WIDTH$3} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    svgAriaLabel = computed(() => `${this.ariaLabel()}. ${this.i18n.tableSuffix}`, ...(ngDevMode ? [{ debugName: "svgAriaLabel" }] : []));
+    /** Resolved colour per series — explicit override or contrast-checked palette token. */
+    seriesColors = computed(() => this.series().map((s, i) => s.color ?? `var(--color-chart-series-${(i % AF_CHART_PALETTE_SIZE) + 1})`), ...(ngDevMode ? [{ debugName: "seriesColors" }] : []));
+    legend = computed(() => this.series().map((s, i) => ({ name: s.name, color: this.seriesColors()[i] })), ...(ngDevMode ? [{ debugName: "legend" }] : []));
+    /** All geometry needed by the template, derived in a single pass. */
+    plot = computed(() => {
+        const categories = this.categories();
+        const series = this.series();
+        const height = this.height();
+        const colors = this.seriesColors();
+        const plotLeft = MARGIN$2.left;
+        const plotRight = VIEW_WIDTH$3 - MARGIN$2.right;
+        const plotTop = MARGIN$2.top;
+        const baseY = height - MARGIN$2.bottom;
+        const plotWidth = plotRight - plotLeft;
+        const allValues = series.flatMap((s) => s.values.filter((v) => v != null));
+        const dataMin = allValues.length ? Math.min(...allValues) : 0;
+        const dataMax = allValues.length ? Math.max(...allValues) : 1;
+        const rawMin = this.yMin() ?? (this.area() ? Math.min(0, dataMin) : dataMin);
+        const rawMax = this.yMax() ?? dataMax;
+        const scale = niceScale(rawMin, rawMax, 5);
+        const yScale = scaleLinear(scale.min, scale.max, baseY, plotTop);
+        const xAt = (i) => categories.length <= 1
+            ? plotLeft + plotWidth / 2
+            : plotLeft + (i / (categories.length - 1)) * plotWidth;
+        const yTicks = scale.ticks.map((value) => ({
+            value,
+            y: roundTo(yScale(value), 2),
+            label: this.format(value),
+        }));
+        const labelStep = Math.max(1, Math.ceil(categories.length / MAX_X_LABELS));
+        const xLabels = categories
+            .map((label, i) => ({ label, x: roundTo(xAt(i), 2), i }))
+            .filter(({ i }) => i % labelStep === 0 || i === categories.length - 1);
+        const seriesGeom = series.map((s, si) => {
+            const segments = [];
+            let current = [];
+            s.values.forEach((v, i) => {
+                if (v == null) {
+                    if (current.length)
+                        segments.push(current);
+                    current = [];
+                    return;
+                }
+                current.push({
+                    x: roundTo(xAt(i), 2),
+                    y: roundTo(yScale(v), 2),
+                    value: v,
+                    category: categories[i] ?? String(i),
+                    series: s.name,
+                });
+            });
+            if (current.length)
+                segments.push(current);
+            return {
+                name: s.name,
+                color: colors[si],
+                lineSegments: segments.map(buildLinePath),
+                areaSegments: segments.map((seg) => buildAreaPath(seg, baseY)),
+                dots: segments.flat(),
+            };
+        });
+        return { baseY: roundTo(baseY, 2), yTicks, xLabels, series: seriesGeom };
+    }, ...(ngDevMode ? [{ debugName: "plot" }] : []));
+    tableModel = computed(() => {
+        const categories = this.categories();
+        const series = this.series();
+        return {
+            caption: this.ariaLabel(),
+            headers: [this.i18n.categoryHeader, ...series.map((s) => s.name)],
+            rows: categories.map((category, i) => [
+                category,
+                ...series.map((s) => {
+                    const v = s.values[i];
+                    return v == null ? '—' : this.format(v);
+                }),
+            ]),
+        };
+    }, ...(ngDevMode ? [{ debugName: "tableModel" }] : []));
+    toggleTable() {
+        this.tableOverride.set(!this.tableVisible());
+    }
+    formatValue(value) {
+        return this.format(value);
+    }
+    format(value) {
+        return formatNumber(value, this.locale(), this.valueFormat());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfLineChartComponent, isStandalone: true, selector: "af-line-chart", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, showTableInitially: { classPropertyName: "showTableInitially", publicName: "showTableInitially", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            @for (tick of plot().yTicks; track tick.value) {
+              <line
+                class="ct-chart__grid-line"
+                [attr.x1]="margin.left"
+                [attr.y1]="tick.y"
+                [attr.x2]="viewWidth - margin.right"
+                [attr.y2]="tick.y" />
+              <text
+                class="ct-chart__tick-label"
+                [attr.x]="margin.left - 6"
+                [attr.y]="tick.y"
+                text-anchor="end"
+                dominant-baseline="middle">
+                {{ tick.label }}
+              </text>
+            }
+
+            <line
+              class="ct-chart__axis-line"
+              [attr.x1]="margin.left"
+              [attr.y1]="plot().baseY"
+              [attr.x2]="viewWidth - margin.right"
+              [attr.y2]="plot().baseY" />
+
+            @for (label of plot().xLabels; track $index) {
+              <text
+                class="ct-chart__tick-label"
+                [attr.x]="label.x"
+                [attr.y]="plot().baseY + 18"
+                text-anchor="middle">
+                {{ label.label }}
+              </text>
+            }
+
+            @for (s of plot().series; track s.name) {
+              <g [style.color]="s.color">
+                @if (area()) {
+                  @for (seg of s.areaSegments; track $index) {
+                    <path class="ct-chart__area" [attr.d]="seg" />
+                  }
+                }
+                @for (seg of s.lineSegments; track $index) {
+                  <path class="ct-chart__line" [attr.d]="seg" />
+                }
+                @if (showDots()) {
+                  @for (dot of s.dots; track $index) {
+                    <circle class="ct-chart__dot" [attr.cx]="dot.x" [attr.cy]="dot.y" r="3">
+                      <title>{{ dot.series }} — {{ dot.category }}: {{ formatValue(dot.value) }}</title>
+                    </circle>
+                  }
+                }
+              </g>
+            }
+          </svg>
+
+          @if (showLegend()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.name) {
+                <li class="ct-chart__legend-item" [style.color]="item.color">
+                  <span
+                    class="ct-chart__legend-marker ct-chart__legend-marker--line"
+                    aria-hidden="true"></span>
+                  <span>{{ item.name }}</span>
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AfChartDataTableComponent, selector: "af-chart-data-table", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfLineChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-line-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfChartDataTableComponent],
+                    host: { style: 'display: block' },
+                    template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            @for (tick of plot().yTicks; track tick.value) {
+              <line
+                class="ct-chart__grid-line"
+                [attr.x1]="margin.left"
+                [attr.y1]="tick.y"
+                [attr.x2]="viewWidth - margin.right"
+                [attr.y2]="tick.y" />
+              <text
+                class="ct-chart__tick-label"
+                [attr.x]="margin.left - 6"
+                [attr.y]="tick.y"
+                text-anchor="end"
+                dominant-baseline="middle">
+                {{ tick.label }}
+              </text>
+            }
+
+            <line
+              class="ct-chart__axis-line"
+              [attr.x1]="margin.left"
+              [attr.y1]="plot().baseY"
+              [attr.x2]="viewWidth - margin.right"
+              [attr.y2]="plot().baseY" />
+
+            @for (label of plot().xLabels; track $index) {
+              <text
+                class="ct-chart__tick-label"
+                [attr.x]="label.x"
+                [attr.y]="plot().baseY + 18"
+                text-anchor="middle">
+                {{ label.label }}
+              </text>
+            }
+
+            @for (s of plot().series; track s.name) {
+              <g [style.color]="s.color">
+                @if (area()) {
+                  @for (seg of s.areaSegments; track $index) {
+                    <path class="ct-chart__area" [attr.d]="seg" />
+                  }
+                }
+                @for (seg of s.lineSegments; track $index) {
+                  <path class="ct-chart__line" [attr.d]="seg" />
+                }
+                @if (showDots()) {
+                  @for (dot of s.dots; track $index) {
+                    <circle class="ct-chart__dot" [attr.cx]="dot.x" [attr.cy]="dot.y" r="3">
+                      <title>{{ dot.series }} — {{ dot.category }}: {{ formatValue(dot.value) }}</title>
+                    </circle>
+                  }
+                }
+              </g>
+            }
+          </svg>
+
+          @if (showLegend()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.name) {
+                <li class="ct-chart__legend-item" [style.color]="item.color">
+                  <span
+                    class="ct-chart__legend-marker ct-chart__legend-marker--line"
+                    aria-hidden="true"></span>
+                  <span>{{ item.name }}</span>
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], showTableInitially: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableInitially", required: false }] }] } });
+
+/**
+ * Test harness for AfLineChartComponent.
+ *
+ * Wraps DOM queries behind a semantic API so tests read intent, not selectors.
+ *
+ * @example
+ * const harness = new AfLineChartHarness(fixture.nativeElement);
+ * expect(harness.getSeriesCount()).toBe(2);
+ * harness.toggleTable();
+ * expect(harness.isTableVisible()).toBe(true);
+ */
+class AfLineChartHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-line-chart');
+        if (!el) {
+            throw new Error('AfLineChartHarness: af-line-chart element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the chart `<svg>`, or null when the empty state is shown. */
+    getSvg() {
+        return this.hostEl.querySelector('svg.ct-chart__svg');
+    }
+    /** Returns the SVG's `aria-label`. */
+    getAriaLabel() {
+        return this.getSvg()?.getAttribute('aria-label') ?? null;
+    }
+    /** Returns the number of rendered series groups. */
+    getSeriesCount() {
+        return this.hostEl.querySelectorAll('svg .ct-chart__line').length;
+    }
+    /** Returns all line `<path>` `d` attributes. */
+    getLinePaths() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__line')).map((p) => p.getAttribute('d') ?? '');
+    }
+    /** Returns the number of area fills (0 unless `area` is enabled). */
+    getAreaCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__area').length;
+    }
+    /** Returns the number of point markers. */
+    getDotCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__dot').length;
+    }
+    /** Returns the legend labels in order. */
+    getLegendLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__legend-item')).map((li) => li.textContent?.trim() ?? '');
+    }
+    /** Returns the rendered y-axis tick labels. */
+    getYTickLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__tick-label'))
+            .filter((t) => t.getAttribute('text-anchor') === 'end')
+            .map((t) => t.textContent?.trim() ?? '');
+    }
+    /** Returns whether the empty-state message is shown. */
+    isEmpty() {
+        return this.hostEl.querySelector('.ct-chart__empty') !== null;
+    }
+    /** Returns the accessible data table element (always present when data exists). */
+    getTable() {
+        return this.hostEl.querySelector('table.ct-chart__table');
+    }
+    /** Returns the data-table header cell texts. */
+    getTableHeaders() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__table thead th')).map((th) => th.textContent?.trim() ?? '');
+    }
+    /** Returns the number of data-table body rows. */
+    getTableRowCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__table tbody tr').length;
+    }
+    /** Returns the toggle button that reveals/hides the data table. */
+    getToggle() {
+        return this.hostEl.querySelector('button.ct-chart__toggle');
+    }
+    /** Clicks the data-table toggle button. */
+    toggleTable() {
+        this.getToggle()?.click();
+    }
+    /** Returns whether the data table is visually revealed. */
+    isTableVisible() {
+        return this.hostEl.querySelector('.ct-chart--show-table') !== null;
+    }
+}
+
+let nextBarChartUid = 0;
+const VIEW_WIDTH$2 = 640;
+const MARGIN$1 = { top: 12, right: 16, bottom: 28, left: 48 };
+/** Wider left gutter in horizontal mode to fit right-aligned category labels. */
+const HORIZONTAL_LEFT = 96;
+/** Fraction of each category band reserved as padding (grouped/stacked, non-histogram). */
+const BAND_PADDING = 0.2;
+/**
+ * Accessible bar chart for categorical comparisons and distributions.
+ *
+ * Renders one or more {@link AfChartSeries} over a shared category axis as SVG
+ * `<rect>` bars. Supports grouped and stacked layouts, vertical and horizontal
+ * orientations, and a gap-free histogram mode for distributions. All geometry is
+ * computed with the SSR-safe `chart-geometry` helpers — no DOM, `window`, or
+ * `Date` access — so it renders identically on the server.
+ *
+ * @example Single-series vertical bars
+ * <af-bar-chart
+ *   ariaLabel="Tickets by status"
+ *   [categories]="statuses"
+ *   [series]="[{ name: 'Tickets', values: counts }]" />
+ *
+ * @example Grouped multi-series
+ * <af-bar-chart
+ *   ariaLabel="Cost by origin and week"
+ *   [categories]="weeks"
+ *   [series]="[
+ *     { name: 'Analyzer', values: analyzer },
+ *     { name: 'Resolver', values: resolver },
+ *   ]"
+ *   layout="grouped" />
+ *
+ * @example Horizontal ranked list
+ * <af-bar-chart
+ *   ariaLabel="Top organisations"
+ *   [categories]="orgs"
+ *   [series]="[{ name: 'Documents', values: docs }]"
+ *   orientation="horizontal" />
+ *
+ * @accessibility
+ * - The SVG carries `role="img"` and an `aria-label` describing the chart, with
+ *   a pointer to the always-present data-table fallback.
+ * - A visually-hidden {@link AfChartDataTableComponent} mirrors every value so
+ *   information is never conveyed by colour alone (WCAG 1.4.1); a toggle reveals it.
+ * - Each series is labelled in the legend and each bar carries a `<title>`, so
+ *   colour is never the sole carrier.
+ * - Series colours come from the contrast-checked `--color-chart-series-*` tokens.
+ * - All user-facing strings are configurable via {@link AF_CHART_I18N}.
+ */
+class AfBarChartComponent {
+    i18n = inject(AF_CHART_I18N);
+    tableId = `af-bar-chart-${nextBarChartUid++}`;
+    /** Accessible chart label (required by the WAI-ARIA `img` role). */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Category-axis labels. Series values align 1:1 with these. */
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    /** One or more data series sharing the category axis. A `null` value renders no bar. */
+    series = input.required(...(ngDevMode ? [{ debugName: "series" }] : []));
+    /** How multiple series are arranged: side-by-side (`grouped`) or stacked. */
+    layout = input('grouped', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /** Bar direction: `vertical` columns or `horizontal` rows (ideal for ranked label lists). */
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Render contiguous, gap-free bars for distributions (typically single-series). */
+    histogram = input(false, { ...(ngDevMode ? { debugName: "histogram" } : {}), transform: booleanAttribute });
+    /** Show the series legend. */
+    showLegend = input(true, { ...(ngDevMode ? { debugName: "showLegend" } : {}), transform: booleanAttribute });
+    /** Show the legend even when there is only one series (hidden by default in that case). */
+    showLegendForSingle = input(false, { ...(ngDevMode ? { debugName: "showLegendForSingle" } : {}), transform: booleanAttribute });
+    /** Chart height in viewBox units (width is the fluid 640). */
+    height = input(280, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** Force the value-axis maximum; defaults to a nice value derived from the data. */
+    valueMax = input(null, ...(ngDevMode ? [{ debugName: "valueMax" }] : []));
+    /** BCP-47 locale for number formatting (e.g. `'de-DE'`). */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /** `Intl.NumberFormat` options for axis and value formatting. */
+    valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
+    /** Whether the data-table fallback starts visible. */
+    showTableInitially = input(false, { ...(ngDevMode ? { debugName: "showTableInitially" } : {}), transform: booleanAttribute });
+    tableOverride = signal(null, ...(ngDevMode ? [{ debugName: "tableOverride" }] : []));
+    tableVisible = computed(() => this.tableOverride() ?? this.showTableInitially(), ...(ngDevMode ? [{ debugName: "tableVisible" }] : []));
+    hasData = computed(() => this.categories().length > 0 &&
+        this.series().some((s) => s.values.some((v) => v != null)), ...(ngDevMode ? [{ debugName: "hasData" }] : []));
+    viewBox = computed(() => `0 0 ${VIEW_WIDTH$2} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    svgAriaLabel = computed(() => `${this.ariaLabel()}. ${this.i18n.tableSuffix}`, ...(ngDevMode ? [{ debugName: "svgAriaLabel" }] : []));
+    /** Resolved colour per series — explicit override or contrast-checked palette token. */
+    seriesColors = computed(() => this.series().map((s, i) => s.color ?? `var(--color-chart-series-${(i % AF_CHART_PALETTE_SIZE) + 1})`), ...(ngDevMode ? [{ debugName: "seriesColors" }] : []));
+    /** Whether the legend should render — hidden for a single series unless opted in. */
+    legendVisible = computed(() => this.showLegend() && (this.series().length > 1 || this.showLegendForSingle()), ...(ngDevMode ? [{ debugName: "legendVisible" }] : []));
+    legend = computed(() => this.series().map((s, i) => ({ name: s.name, color: this.seriesColors()[i] })), ...(ngDevMode ? [{ debugName: "legend" }] : []));
+    /** All geometry needed by the template, derived in a single pass. */
+    plot = computed(() => {
+        const categories = this.categories();
+        const series = this.series();
+        const colors = this.seriesColors();
+        const height = this.height();
+        const horizontal = this.orientation() === 'horizontal';
+        const stacked = this.layout() === 'stacked';
+        const histogram = this.histogram();
+        // Resolve the plot box; horizontal needs a wider gutter for category labels.
+        const marginLeft = horizontal ? HORIZONTAL_LEFT : MARGIN$1.left;
+        const plotLeft = marginLeft;
+        const plotRight = VIEW_WIDTH$2 - MARGIN$1.right;
+        const plotTop = MARGIN$1.top;
+        const plotBottom = height - MARGIN$1.bottom;
+        const plotWidth = plotRight - plotLeft;
+        const plotHeight = plotBottom - plotTop;
+        const scale = this.valueScale(series, stacked);
+        // Value-axis pixel scale runs along x (horizontal) or y (vertical, inverted).
+        const valueScale = horizontal
+            ? scaleLinear(scale.min, scale.max, plotLeft, plotRight)
+            : scaleLinear(scale.min, scale.max, plotBottom, plotTop);
+        const zeroPx = roundTo(valueScale(0), 2);
+        const n = categories.length;
+        const bandSpan = (horizontal ? plotHeight : plotWidth) / Math.max(n, 1);
+        const bandStart = horizontal ? plotTop : plotLeft;
+        const padding = histogram ? 0 : bandSpan * BAND_PADDING;
+        const innerSpan = bandSpan - padding;
+        const seriesGeom = this.buildSeries(series, categories, colors, { stacked, horizontal, valueScale, zeroPx, bandStart, bandSpan, padding, innerSpan });
+        const valueTicks = this.buildValueTicks(scale.ticks, {
+            horizontal,
+            valueScale,
+            plotLeft,
+            plotRight,
+            plotTop,
+            plotBottom,
+        });
+        const categoryLabels = this.buildCategoryLabels(categories, {
+            horizontal,
+            bandStart,
+            bandSpan,
+            plotBottom,
+            marginLeft,
+        });
+        const axisLine = horizontal
+            ? { x1: zeroPx, y1: roundTo(plotTop, 2), x2: zeroPx, y2: roundTo(plotBottom, 2) }
+            : { x1: roundTo(plotLeft, 2), y1: zeroPx, x2: roundTo(plotRight, 2), y2: zeroPx };
+        return {
+            series: seriesGeom,
+            valueTicks,
+            categoryLabels,
+            axisLine,
+            valueLabelAnchor: horizontal ? 'middle' : 'end',
+            categoryLabelAnchor: horizontal ? 'end' : 'middle',
+        };
+    }, ...(ngDevMode ? [{ debugName: "plot" }] : []));
+    tableModel = computed(() => {
+        const categories = this.categories();
+        const series = this.series();
+        const single = series.length === 1;
+        const headers = single
+            ? [this.i18n.categoryHeader, this.i18n.valueHeader]
+            : [this.i18n.categoryHeader, ...series.map((s) => s.name)];
+        return {
+            caption: this.ariaLabel(),
+            headers,
+            rows: categories.map((category, i) => [
+                category,
+                ...series.map((s) => {
+                    const v = s.values[i];
+                    return v == null ? '—' : this.format(v);
+                }),
+            ]),
+        };
+    }, ...(ngDevMode ? [{ debugName: "tableModel" }] : []));
+    toggleTable() {
+        this.tableOverride.set(!this.tableVisible());
+    }
+    /**
+     * Compute the value-axis domain and ticks. The domain always includes 0; the
+     * max defaults to the data max (or the largest stack total in stacked mode).
+     */
+    valueScale(series, stacked) {
+        const categoryCount = this.categories().length;
+        const allValues = series.flatMap((s) => s.values.filter((v) => v != null));
+        const dataMin = allValues.length ? Math.min(...allValues) : 0;
+        const dataMax = allValues.length ? Math.max(...allValues) : 1;
+        // Stacked bars accumulate positive and negative values into separate stacks,
+        // so the axis must reach the largest positive stack *and* the smallest
+        // negative stack — not just the largest/smallest single value.
+        let maxStackTotal = dataMax;
+        let minStackTotal = dataMin;
+        if (stacked) {
+            maxStackTotal = 0;
+            minStackTotal = 0;
+            for (let i = 0; i < categoryCount; i++) {
+                let pos = 0;
+                let neg = 0;
+                for (const s of series) {
+                    const v = s.values[i];
+                    if (v == null)
+                        continue;
+                    if (v > 0)
+                        pos += v;
+                    else
+                        neg += v;
+                }
+                if (pos > maxStackTotal)
+                    maxStackTotal = pos;
+                if (neg < minStackTotal)
+                    minStackTotal = neg;
+            }
+        }
+        // The value axis always includes the zero baseline so bars grow from an
+        // on-canvas origin — even when every value (or stack total) is negative.
+        const rawMin = Math.min(0, stacked ? minStackTotal : dataMin);
+        const rawMax = this.valueMax() ?? Math.max(0, stacked ? maxStackTotal : dataMax);
+        return niceScale(rawMin, rawMax, 5);
+    }
+    /** Build the per-series bar geometry for every layout/orientation combination. */
+    buildSeries(series, categories, colors, ctx) {
+        const { stacked, horizontal, valueScale, zeroPx, bandStart, bandSpan, padding, innerSpan } = ctx;
+        const seriesCount = series.length;
+        // Grouped sub-bars split the inner band evenly and touch each other.
+        const subWidth = stacked ? innerSpan : innerSpan / Math.max(seriesCount, 1);
+        // Running positive/negative stack offsets per category (value units).
+        const posOffset = new Array(categories.length).fill(0);
+        const negOffset = new Array(categories.length).fill(0);
+        return series.map((s, si) => {
+            const bars = [];
+            categories.forEach((category, ci) => {
+                const value = s.values[ci];
+                if (value == null)
+                    return;
+                const bandOrigin = bandStart + ci * bandSpan + padding / 2;
+                let startPx;
+                let endPx;
+                let cross;
+                if (stacked) {
+                    const base = value >= 0 ? posOffset[ci] : negOffset[ci];
+                    const next = base + value;
+                    startPx = roundTo(valueScale(base), 2);
+                    endPx = roundTo(valueScale(next), 2);
+                    if (value >= 0)
+                        posOffset[ci] = next;
+                    else
+                        negOffset[ci] = next;
+                    cross = bandOrigin;
+                }
+                else {
+                    startPx = zeroPx;
+                    endPx = roundTo(valueScale(value), 2);
+                    cross = bandOrigin + si * subWidth;
+                }
+                bars.push(this.makeBar(horizontal, startPx, endPx, cross, subWidth, {
+                    series: s.name,
+                    category,
+                    value,
+                }));
+            });
+            return { name: s.name, color: colors[si], bars };
+        });
+    }
+    /** Assemble one bar rect from value-axis endpoints and the cross-axis band slot. */
+    makeBar(horizontal, startPx, endPx, cross, thickness, meta) {
+        const title = `${meta.series} — ${meta.category}: ${this.format(meta.value)}`;
+        const t = roundTo(Math.max(0, thickness), 2);
+        const c = roundTo(cross, 2);
+        const extent = roundTo(Math.max(0, Math.abs(endPx - startPx)), 2);
+        if (horizontal) {
+            const x = roundTo(Math.min(startPx, endPx), 2);
+            return { x, y: c, width: extent, height: t, title };
+        }
+        const y = roundTo(Math.min(startPx, endPx), 2);
+        return { x: c, y, width: t, height: extent, title };
+    }
+    /** Build value-axis grid lines + tick labels for the active orientation. */
+    buildValueTicks(ticks, ctx) {
+        const { horizontal, valueScale, plotLeft, plotRight, plotTop, plotBottom } = ctx;
+        return ticks.map((value) => {
+            const p = roundTo(valueScale(value), 2);
+            const label = this.format(value);
+            if (horizontal) {
+                return {
+                    value,
+                    label,
+                    x1: p,
+                    y1: roundTo(plotTop, 2),
+                    x2: p,
+                    y2: roundTo(plotBottom, 2),
+                    labelX: p,
+                    labelY: roundTo(plotBottom + 18, 2),
+                };
+            }
+            return {
+                value,
+                label,
+                x1: roundTo(plotLeft, 2),
+                y1: p,
+                x2: roundTo(plotRight, 2),
+                y2: p,
+                labelX: roundTo(plotLeft - 6, 2),
+                labelY: p,
+            };
+        });
+    }
+    /** Build category-axis labels centred on each band, anchored per orientation. */
+    buildCategoryLabels(categories, ctx) {
+        const { horizontal, bandStart, bandSpan, plotBottom, marginLeft } = ctx;
+        return categories.map((label, i) => {
+            const center = bandStart + i * bandSpan + bandSpan / 2;
+            if (horizontal) {
+                return { label, x: roundTo(marginLeft - 8, 2), y: roundTo(center, 2) };
+            }
+            return { label, x: roundTo(center, 2), y: roundTo(plotBottom + 18, 2) };
+        });
+    }
+    format(value) {
+        return formatNumber(value, this.locale(), this.valueFormat());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfBarChartComponent, isStandalone: true, selector: "af-bar-chart", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, histogram: { classPropertyName: "histogram", publicName: "histogram", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendForSingle: { classPropertyName: "showLegendForSingle", publicName: "showLegendForSingle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, valueMax: { classPropertyName: "valueMax", publicName: "valueMax", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, showTableInitially: { classPropertyName: "showTableInitially", publicName: "showTableInitially", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            <g class="ct-chart__value-ticks">
+              @for (tick of plot().valueTicks; track tick.value) {
+                <line
+                  class="ct-chart__grid-line"
+                  [attr.x1]="tick.x1"
+                  [attr.y1]="tick.y1"
+                  [attr.x2]="tick.x2"
+                  [attr.y2]="tick.y2" />
+                <text
+                  class="ct-chart__tick-label"
+                  [attr.x]="tick.labelX"
+                  [attr.y]="tick.labelY"
+                  [attr.text-anchor]="plot().valueLabelAnchor"
+                  dominant-baseline="middle">
+                  {{ tick.label }}
+                </text>
+              }
+            </g>
+
+            <line
+              class="ct-chart__axis-line"
+              [attr.x1]="plot().axisLine.x1"
+              [attr.y1]="plot().axisLine.y1"
+              [attr.x2]="plot().axisLine.x2"
+              [attr.y2]="plot().axisLine.y2" />
+
+            <g class="ct-chart__category-labels">
+              @for (label of plot().categoryLabels; track $index) {
+                <text
+                  class="ct-chart__tick-label"
+                  [attr.x]="label.x"
+                  [attr.y]="label.y"
+                  [attr.text-anchor]="plot().categoryLabelAnchor"
+                  dominant-baseline="middle">
+                  {{ label.label }}
+                </text>
+              }
+            </g>
+
+            @for (s of plot().series; track s.name) {
+              <g [style.color]="s.color">
+                @for (bar of s.bars; track $index) {
+                  <rect
+                    class="ct-chart__bar"
+                    [attr.x]="bar.x"
+                    [attr.y]="bar.y"
+                    [attr.width]="bar.width"
+                    [attr.height]="bar.height">
+                    <title>{{ bar.title }}</title>
+                  </rect>
+                }
+              </g>
+            }
+          </svg>
+
+          @if (legendVisible()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.name) {
+                <li class="ct-chart__legend-item" [style.color]="item.color">
+                  <span class="ct-chart__legend-marker" aria-hidden="true"></span>
+                  <span>{{ item.name }}</span>
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AfChartDataTableComponent, selector: "af-chart-data-table", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBarChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-bar-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfChartDataTableComponent],
+                    host: { style: 'display: block' },
+                    template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            <g class="ct-chart__value-ticks">
+              @for (tick of plot().valueTicks; track tick.value) {
+                <line
+                  class="ct-chart__grid-line"
+                  [attr.x1]="tick.x1"
+                  [attr.y1]="tick.y1"
+                  [attr.x2]="tick.x2"
+                  [attr.y2]="tick.y2" />
+                <text
+                  class="ct-chart__tick-label"
+                  [attr.x]="tick.labelX"
+                  [attr.y]="tick.labelY"
+                  [attr.text-anchor]="plot().valueLabelAnchor"
+                  dominant-baseline="middle">
+                  {{ tick.label }}
+                </text>
+              }
+            </g>
+
+            <line
+              class="ct-chart__axis-line"
+              [attr.x1]="plot().axisLine.x1"
+              [attr.y1]="plot().axisLine.y1"
+              [attr.x2]="plot().axisLine.x2"
+              [attr.y2]="plot().axisLine.y2" />
+
+            <g class="ct-chart__category-labels">
+              @for (label of plot().categoryLabels; track $index) {
+                <text
+                  class="ct-chart__tick-label"
+                  [attr.x]="label.x"
+                  [attr.y]="label.y"
+                  [attr.text-anchor]="plot().categoryLabelAnchor"
+                  dominant-baseline="middle">
+                  {{ label.label }}
+                </text>
+              }
+            </g>
+
+            @for (s of plot().series; track s.name) {
+              <g [style.color]="s.color">
+                @for (bar of s.bars; track $index) {
+                  <rect
+                    class="ct-chart__bar"
+                    [attr.x]="bar.x"
+                    [attr.y]="bar.y"
+                    [attr.width]="bar.width"
+                    [attr.height]="bar.height">
+                    <title>{{ bar.title }}</title>
+                  </rect>
+                }
+              </g>
+            }
+          </svg>
+
+          @if (legendVisible()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.name) {
+                <li class="ct-chart__legend-item" [style.color]="item.color">
+                  <span class="ct-chart__legend-marker" aria-hidden="true"></span>
+                  <span>{{ item.name }}</span>
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], histogram: [{ type: i0.Input, args: [{ isSignal: true, alias: "histogram", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendForSingle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendForSingle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], valueMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMax", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], showTableInitially: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableInitially", required: false }] }] } });
+
+/**
+ * Test harness for AfBarChartComponent.
+ *
+ * Wraps DOM queries behind a semantic API so tests read intent, not selectors.
+ *
+ * @example
+ * const harness = new AfBarChartHarness(fixture.nativeElement);
+ * expect(harness.getBarCount()).toBe(5);
+ * harness.toggleTable();
+ * expect(harness.isTableVisible()).toBe(true);
+ */
+class AfBarChartHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-bar-chart');
+        if (!el) {
+            throw new Error('AfBarChartHarness: af-bar-chart element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the chart `<svg>`, or null when the empty state is shown. */
+    getSvg() {
+        return this.hostEl.querySelector('svg.ct-chart__svg');
+    }
+    /** Returns the SVG's `aria-label`. */
+    getAriaLabel() {
+        return this.getSvg()?.getAttribute('aria-label') ?? null;
+    }
+    /** Returns the total number of rendered bar rects. */
+    getBarCount() {
+        return this.getBars().length;
+    }
+    /** Returns all bar `<rect>` elements in DOM order. */
+    getBars() {
+        return Array.from(this.hostEl.querySelectorAll('rect.ct-chart__bar'));
+    }
+    /** Returns the legend labels in order. */
+    getLegendLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__legend-item')).map((li) => li.textContent?.trim() ?? '');
+    }
+    /** Returns the rendered value-axis tick labels (orientation-independent). */
+    getValueTickLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__value-ticks .ct-chart__tick-label')).map((t) => t.textContent?.trim() ?? '');
+    }
+    /** Returns the rendered category-axis labels in order. */
+    getCategoryLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__category-labels .ct-chart__tick-label')).map((t) => t.textContent?.trim() ?? '');
+    }
+    /** Returns whether the empty-state message is shown. */
+    isEmpty() {
+        return this.hostEl.querySelector('.ct-chart__empty') !== null;
+    }
+    /** Returns the accessible data table element (always present when data exists). */
+    getTable() {
+        return this.hostEl.querySelector('table.ct-chart__table');
+    }
+    /** Returns the data-table header cell texts. */
+    getTableHeaders() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__table thead th')).map((th) => th.textContent?.trim() ?? '');
+    }
+    /** Returns the number of data-table body rows. */
+    getTableRowCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__table tbody tr').length;
+    }
+    /** Returns the toggle button that reveals/hides the data table. */
+    getToggle() {
+        return this.hostEl.querySelector('button.ct-chart__toggle');
+    }
+    /** Clicks the data-table toggle button. */
+    toggleTable() {
+        this.getToggle()?.click();
+    }
+    /** Returns whether the data table is visually revealed. */
+    isTableVisible() {
+        return this.hostEl.querySelector('.ct-chart--show-table') !== null;
+    }
+}
+
+let nextDonutChartUid = 0;
+const VIEW_WIDTH$1 = 640;
+const MARGIN = 16;
+/**
+ * Accessible donut / pie chart for part-to-whole data.
+ *
+ * Renders a set of {@link AfChartDatum} slices as an SVG ring (or full pie when
+ * `innerRadiusRatio` is 0). Arc geometry is computed with the SSR-safe
+ * `chart-geometry` helpers — no DOM, `window`, `Date` or `Math.random` access —
+ * so it renders identically on the server.
+ *
+ * @example Donut with a centre total
+ * <af-donut-chart
+ *   ariaLabel="Contract mix"
+ *   [data]="[
+ *     { label: 'Enterprise', value: 60 },
+ *     { label: 'Team', value: 40 },
+ *   ]"
+ *   centerLabel="Total" />
+ *
+ * @example Full pie
+ * <af-donut-chart
+ *   ariaLabel="AI cost by origin"
+ *   [data]="costs"
+ *   [innerRadiusRatio]="0" />
+ *
+ * @accessibility
+ * - The SVG carries `role="img"` and an `aria-label` describing the chart, with
+ *   a pointer to the always-present data-table fallback.
+ * - A visually-hidden {@link AfChartDataTableComponent} mirrors every slice's
+ *   exact value and percentage, so information is never conveyed by colour alone
+ *   (WCAG 1.4.1); a toggle reveals it.
+ * - The legend lists every slice label (including zero-value data), so colour is
+ *   never the sole carrier, and each slice exposes a native `<title>` tooltip.
+ * - Slice colours come from the contrast-checked `--color-chart-series-*` tokens.
+ * - All user-facing strings are configurable via {@link AF_CHART_I18N}.
+ */
+class AfDonutChartComponent {
+    i18n = inject(AF_CHART_I18N);
+    tableId = `af-donut-chart-${nextDonutChartUid++}`;
+    /** Accessible chart label (required by the WAI-ARIA `img` role). */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Slices of the ring. Negative values clamp to 0; zero-value slices are
+     * omitted from the ring but still listed in the legend and data table. */
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Hole size as a fraction of the radius: `0` → full pie, `~0.6` → donut.
+     * Clamped to `[0, 0.9]`. */
+    innerRadiusRatio = input(0.6, ...(ngDevMode ? [{ debugName: "innerRadiusRatio" }] : []));
+    /** Small caption rendered inside the donut hole (e.g. `'Total'`). */
+    centerLabel = input('', ...(ngDevMode ? [{ debugName: "centerLabel" }] : []));
+    /** Big text inside the hole; defaults to the formatted sum of values. */
+    centerValue = input('', ...(ngDevMode ? [{ debugName: "centerValue" }] : []));
+    /** Show the slice legend. */
+    showLegend = input(true, { ...(ngDevMode ? { debugName: "showLegend" } : {}), transform: booleanAttribute });
+    /** Show each slice's percentage share next to its legend label. */
+    showPercentInLegend = input(true, { ...(ngDevMode ? { debugName: "showPercentInLegend" } : {}), transform: booleanAttribute });
+    /** Chart height in viewBox units (width is fluid). */
+    height = input(260, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** BCP-47 locale for number formatting (e.g. `'de-DE'`). */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /** `Intl.NumberFormat` options for value formatting. */
+    valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
+    /** Whether the data-table fallback starts visible. */
+    showTableInitially = input(false, { ...(ngDevMode ? { debugName: "showTableInitially" } : {}), transform: booleanAttribute });
+    tableOverride = signal(null, ...(ngDevMode ? [{ debugName: "tableOverride" }] : []));
+    tableVisible = computed(() => this.tableOverride() ?? this.showTableInitially(), ...(ngDevMode ? [{ debugName: "tableVisible" }] : []));
+    /** Clamped magnitudes aligned 1:1 with `data()` (negatives → 0). */
+    values = computed(() => this.data().map((d) => Math.max(0, d.value)), ...(ngDevMode ? [{ debugName: "values" }] : []));
+    total = computed(() => this.values().reduce((sum, v) => sum + v, 0), ...(ngDevMode ? [{ debugName: "total" }] : []));
+    hasData = computed(() => this.total() > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : []));
+    viewBox = computed(() => `0 0 ${VIEW_WIDTH$1} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    svgAriaLabel = computed(() => `${this.ariaLabel()}. ${this.i18n.tableSuffix}`, ...(ngDevMode ? [{ debugName: "svgAriaLabel" }] : []));
+    /** Resolved colour per datum — explicit override or contrast-checked palette
+     * token — keyed by original index so slices and legend never diverge. */
+    colors = computed(() => this.data().map((d, i) => d.color ?? `var(--color-chart-series-${(i % AF_CHART_PALETTE_SIZE) + 1})`), ...(ngDevMode ? [{ debugName: "colors" }] : []));
+    /** Formatted shares aligned 1:1 with `data()` (e.g. `'40%'`). */
+    percents = computed(() => {
+        const total = this.total() || 1;
+        return this.values().map((v) => this.formatPercent((v / total) * 100));
+    }, ...(ngDevMode ? [{ debugName: "percents" }] : []));
+    /** Centre value text: explicit override or the formatted total. */
+    centerValueText = computed(() => this.centerValue() || this.format(this.total()), ...(ngDevMode ? [{ debugName: "centerValueText" }] : []));
+    legend = computed(() => this.data().map((d, i) => ({
+        label: d.label,
+        color: this.colors()[i],
+        percent: this.percents()[i],
+    })), ...(ngDevMode ? [{ debugName: "legend" }] : []));
+    /** All ring geometry derived in a single pass; zero-value slices are skipped. */
+    plot = computed(() => {
+        const data = this.data();
+        const values = this.values();
+        const colors = this.colors();
+        const percents = this.percents();
+        const total = this.total() || 1;
+        const height = this.height();
+        const cx = VIEW_WIDTH$1 / 2;
+        const cy = height / 2;
+        const outerRadius = Math.min(VIEW_WIDTH$1, height) / 2 - MARGIN;
+        const innerRadius = outerRadius * clamp(this.innerRadiusRatio(), 0, 0.9);
+        const slices = [];
+        let startAngle = 0;
+        data.forEach((d, i) => {
+            const value = values[i];
+            const sweep = (360 * value) / total;
+            if (value > 0) {
+                slices.push({
+                    label: d.label,
+                    color: colors[i],
+                    path: donutSlicePath(cx, cy, outerRadius, innerRadius, startAngle, startAngle + sweep),
+                    value: this.format(value),
+                    percent: percents[i],
+                });
+            }
+            startAngle += sweep;
+        });
+        return {
+            slices,
+            cx,
+            cy,
+            labelY: cy + 22,
+            showCenter: innerRadius > 0,
+        };
+    }, ...(ngDevMode ? [{ debugName: "plot" }] : []));
+    tableModel = computed(() => {
+        const data = this.data();
+        const values = this.values();
+        const percents = this.percents();
+        return {
+            caption: this.ariaLabel(),
+            headers: [this.i18n.categoryHeader, this.i18n.valueHeader, this.i18n.percentHeader],
+            rows: data.map((d, i) => [d.label, this.format(values[i]), percents[i]]),
+        };
+    }, ...(ngDevMode ? [{ debugName: "tableModel" }] : []));
+    toggleTable() {
+        this.tableOverride.set(!this.tableVisible());
+    }
+    /** Format a percentage to at most one fraction digit, suffixed with `%`. */
+    formatPercent(value) {
+        return `${formatNumber(value, this.locale(), { maximumFractionDigits: 1 })}%`;
+    }
+    format(value) {
+        return formatNumber(value, this.locale(), this.valueFormat());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfDonutChartComponent, isStandalone: true, selector: "af-donut-chart", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, innerRadiusRatio: { classPropertyName: "innerRadiusRatio", publicName: "innerRadiusRatio", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showPercentInLegend: { classPropertyName: "showPercentInLegend", publicName: "showPercentInLegend", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, showTableInitially: { classPropertyName: "showTableInitially", publicName: "showTableInitially", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            @for (slice of plot().slices; track slice.label) {
+              <path class="ct-chart__slice" [attr.d]="slice.path" [style.color]="slice.color">
+                <title>{{ slice.label }}: {{ slice.value }} ({{ slice.percent }})</title>
+              </path>
+            }
+
+            @if (plot().showCenter) {
+              <text
+                class="ct-chart__donut-value"
+                [attr.x]="plot().cx"
+                [attr.y]="plot().cy"
+                text-anchor="middle"
+                dominant-baseline="middle">
+                {{ centerValueText() }}
+              </text>
+              @if (centerLabel()) {
+                <text
+                  class="ct-chart__donut-label"
+                  [attr.x]="plot().cx"
+                  [attr.y]="plot().labelY"
+                  text-anchor="middle"
+                  dominant-baseline="middle">
+                  {{ centerLabel() }}
+                </text>
+              }
+            }
+          </svg>
+
+          @if (showLegend()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.label) {
+                <li class="ct-chart__legend-item">
+                  <span
+                    class="ct-chart__legend-marker"
+                    [style.color]="item.color"
+                    aria-hidden="true"></span>
+                  <span>{{ item.label }}</span>
+                  @if (showPercentInLegend()) {
+                    <span>{{ item.percent }}</span>
+                  }
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AfChartDataTableComponent, selector: "af-chart-data-table", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfDonutChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-donut-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfChartDataTableComponent],
+                    host: { style: 'display: block' },
+                    template: `
+    <div class="ct-chart" [class.ct-chart--show-table]="tableVisible()">
+      <figure class="ct-chart__figure">
+        @if (hasData()) {
+          <div class="ct-chart__toolbar">
+            <button
+              type="button"
+              class="ct-chart__toggle"
+              [attr.aria-expanded]="tableVisible()"
+              [attr.aria-controls]="tableId"
+              (click)="toggleTable()">
+              {{ tableVisible() ? i18n.hideTable : i18n.showTable }}
+            </button>
+          </div>
+
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            role="img"
+            [attr.aria-label]="svgAriaLabel()">
+            @for (slice of plot().slices; track slice.label) {
+              <path class="ct-chart__slice" [attr.d]="slice.path" [style.color]="slice.color">
+                <title>{{ slice.label }}: {{ slice.value }} ({{ slice.percent }})</title>
+              </path>
+            }
+
+            @if (plot().showCenter) {
+              <text
+                class="ct-chart__donut-value"
+                [attr.x]="plot().cx"
+                [attr.y]="plot().cy"
+                text-anchor="middle"
+                dominant-baseline="middle">
+                {{ centerValueText() }}
+              </text>
+              @if (centerLabel()) {
+                <text
+                  class="ct-chart__donut-label"
+                  [attr.x]="plot().cx"
+                  [attr.y]="plot().labelY"
+                  text-anchor="middle"
+                  dominant-baseline="middle">
+                  {{ centerLabel() }}
+                </text>
+              }
+            }
+          </svg>
+
+          @if (showLegend()) {
+            <ul class="ct-chart__legend">
+              @for (item of legend(); track item.label) {
+                <li class="ct-chart__legend-item">
+                  <span
+                    class="ct-chart__legend-marker"
+                    [style.color]="item.color"
+                    aria-hidden="true"></span>
+                  <span>{{ item.label }}</span>
+                  @if (showPercentInLegend()) {
+                    <span>{{ item.percent }}</span>
+                  }
+                </li>
+              }
+            </ul>
+          }
+
+          <div class="ct-chart__table-wrap" [id]="tableId">
+            <af-chart-data-table [model]="tableModel()" />
+          </div>
+        } @else {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        }
+      </figure>
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], innerRadiusRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadiusRatio", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showPercentInLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentInLegend", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], showTableInitially: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableInitially", required: false }] }] } });
+
+/**
+ * Test harness for AfDonutChartComponent.
+ *
+ * Wraps DOM queries behind a semantic API so tests read intent, not selectors.
+ *
+ * @example
+ * const harness = new AfDonutChartHarness(fixture.nativeElement);
+ * expect(harness.getSliceCount()).toBe(2);
+ * harness.toggleTable();
+ * expect(harness.isTableVisible()).toBe(true);
+ */
+class AfDonutChartHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-donut-chart');
+        if (!el) {
+            throw new Error('AfDonutChartHarness: af-donut-chart element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the chart `<svg>`, or null when the empty state is shown. */
+    getSvg() {
+        return this.hostEl.querySelector('svg.ct-chart__svg');
+    }
+    /** Returns the SVG's `aria-label`. */
+    getAriaLabel() {
+        return this.getSvg()?.getAttribute('aria-label') ?? null;
+    }
+    /** Returns the number of rendered (non-zero) ring slices. */
+    getSliceCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__slice').length;
+    }
+    /** Returns all slice `<path>` `d` attributes. */
+    getSlicePaths() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__slice')).map((p) => p.getAttribute('d') ?? '');
+    }
+    /** Returns the big centre value text, or null in pie mode (no centre text). */
+    getCenterValue() {
+        return this.hostEl.querySelector('.ct-chart__donut-value')?.textContent?.trim() ?? null;
+    }
+    /** Returns the small centre caption text, or null when none is rendered. */
+    getCenterLabel() {
+        return this.hostEl.querySelector('.ct-chart__donut-label')?.textContent?.trim() ?? null;
+    }
+    /** Returns the legend item texts in order (label plus optional percent). */
+    getLegendLabels() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__legend-item')).map((li) => li.textContent?.trim().replace(/\s+/g, ' ') ?? '');
+    }
+    /** Returns whether the empty-state message is shown. */
+    isEmpty() {
+        return this.hostEl.querySelector('.ct-chart__empty') !== null;
+    }
+    /** Returns the accessible data table element (always present when data exists). */
+    getTable() {
+        return this.hostEl.querySelector('table.ct-chart__table');
+    }
+    /** Returns the data-table header cell texts. */
+    getTableHeaders() {
+        return Array.from(this.hostEl.querySelectorAll('.ct-chart__table thead th')).map((th) => th.textContent?.trim() ?? '');
+    }
+    /** Returns the number of data-table body rows. */
+    getTableRowCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__table tbody tr').length;
+    }
+    /** Returns the toggle button that reveals/hides the data table. */
+    getToggle() {
+        return this.hostEl.querySelector('button.ct-chart__toggle');
+    }
+    /** Clicks the data-table toggle button. */
+    toggleTable() {
+        this.getToggle()?.click();
+    }
+    /** Returns whether the data table is visually revealed. */
+    isTableVisible() {
+        return this.hostEl.querySelector('.ct-chart--show-table') !== null;
+    }
+}
+
+/** Inset (in viewBox units) so the stroke and the last-point dot are never clipped. */
+const PAD$1 = 2;
+/** Default series colour token used when no explicit `color` is provided. */
+const DEFAULT_COLOR = 'var(--color-chart-series-1)';
+/** Fallback summary template used when {@link AF_CHART_I18N} omits `sparklineSummary`. */
+const DEFAULT_SUMMARY = '{label}: {count} points, min {min}, max {max}, latest {last}.';
+/**
+ * Tiny inline trend line (sparkline) for KPI tiles and dense tables.
+ *
+ * Renders a compact SVG line — optionally filled and with a marker on the final
+ * point — at a fixed small size (it does not stretch to its container). Geometry
+ * is computed with the SSR-safe `chart-geometry` helpers — no DOM, `window` or
+ * `Date` access — so it renders identically on the server.
+ *
+ * Because a sparkline is too small for axes, a legend or a visible toggle, the
+ * trend is summarised in the SVG's `aria-label` and the exact values are always
+ * available through a visually-hidden data-table fallback.
+ *
+ * @example KPI tile trend
+ * <af-sparkline ariaLabel="Sign-ups, last 14 days" [values]="signups" />
+ *
+ * @example Filled sparkline without the end marker
+ * <af-sparkline
+ *   ariaLabel="Latency, last hour"
+ *   [values]="latency"
+ *   [area]="true"
+ *   [showLastDot]="false" />
+ *
+ * @accessibility
+ * - The SVG carries `role="img"` and an `aria-label` that conveys the trend
+ *   (point count, min, max and latest value) plus a pointer to the data table.
+ * - A visually-hidden {@link AfChartDataTableComponent} mirrors every value so
+ *   information is never conveyed by colour or shape alone (WCAG 1.4.1).
+ * - The series colour defaults to the contrast-checked `--color-chart-series-1`
+ *   token; colour is never the sole carrier of meaning.
+ * - All user-facing strings are configurable via {@link AF_CHART_I18N}.
+ */
+class AfSparklineComponent {
+    i18n = inject(AF_CHART_I18N);
+    /** Accessible chart label (required by the WAI-ARIA `img` role). */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** The numeric series to plot. `null` entries are skipped in the geometry. */
+    values = input.required(...(ngDevMode ? [{ debugName: "values" }] : []));
+    /** Optional labels for the data-table fallback; falls back to 1-based indices. */
+    categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    /** Fill the area beneath the line. */
+    area = input(false, { ...(ngDevMode ? { debugName: "area" } : {}), transform: booleanAttribute });
+    /** Render a marker on the final point. */
+    showLastDot = input(true, { ...(ngDevMode ? { debugName: "showLastDot" } : {}), transform: booleanAttribute });
+    /** Explicit CSS colour; defaults to `--color-chart-series-1`. */
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** SVG width in viewBox units (the sparkline keeps this compact size). */
+    width = input(120, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /** SVG height in viewBox units (the sparkline keeps this compact size). */
+    height = input(32, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** BCP-47 locale for number formatting (e.g. `'de-DE'`). */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /** `Intl.NumberFormat` options for the aria-label and data-table values. */
+    valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
+    /** Numeric values with `null`/`NaN` entries removed — drives geometry and the summary. */
+    numericValues = computed(() => this.values().filter((v) => v != null && !Number.isNaN(v)), ...(ngDevMode ? [{ debugName: "numericValues" }] : []));
+    hasData = computed(() => this.numericValues().length > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : []));
+    resolvedColor = computed(() => this.color() || DEFAULT_COLOR, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : []));
+    viewBox = computed(() => `0 0 ${this.width()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    /** Trend-describing label: count, min, max and latest value, plus the table pointer. */
+    svgAriaLabel = computed(() => {
+        const values = this.numericValues();
+        const count = values.length;
+        const summary = (this.i18n.sparklineSummary ?? DEFAULT_SUMMARY)
+            .replace('{label}', this.ariaLabel())
+            .replace('{count}', String(count))
+            .replace('{min}', this.format(Math.min(...values)))
+            .replace('{max}', this.format(Math.max(...values)))
+            .replace('{last}', this.format(values[count - 1]));
+        return `${summary} ${this.i18n.tableSuffix}`;
+    }, ...(ngDevMode ? [{ debugName: "svgAriaLabel" }] : []));
+    /** All geometry needed by the template, derived in a single pass. */
+    plot = computed(() => {
+        const values = this.numericValues();
+        const width = this.width();
+        const height = this.height();
+        const left = PAD$1;
+        const right = width - PAD$1;
+        const top = PAD$1;
+        const bottom = height - PAD$1;
+        const dataMin = Math.min(...values);
+        const dataMax = Math.max(...values);
+        const yScale = scaleLinear(dataMin, dataMax, bottom, top);
+        const xAt = (i) => values.length <= 1
+            ? (left + right) / 2
+            : left + (i / (values.length - 1)) * (right - left);
+        const points = values.map((v, i) => ({
+            x: roundTo(xAt(i), 2),
+            y: roundTo(yScale(v), 2),
+        }));
+        return {
+            line: buildLinePath(points),
+            area: this.area() ? buildAreaPath(points, bottom) : '',
+            lastDot: points[points.length - 1] ?? null,
+        };
+    }, ...(ngDevMode ? [{ debugName: "plot" }] : []));
+    tableModel = computed(() => {
+        const values = this.values();
+        const categories = this.categories();
+        return {
+            caption: this.ariaLabel(),
+            headers: [this.i18n.categoryHeader, this.i18n.valueHeader],
+            rows: values.map((v, i) => [
+                categories[i] ?? String(i + 1),
+                v == null ? '—' : this.format(v),
+            ]),
+        };
+    }, ...(ngDevMode ? [{ debugName: "tableModel" }] : []));
+    format(value) {
+        return formatNumber(value, this.locale(), this.valueFormat());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfSparklineComponent, isStandalone: true, selector: "af-sparkline", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, showLastDot: { classPropertyName: "showLastDot", publicName: "showLastDot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-block" }, ngImport: i0, template: `
+    <div class="ct-chart ct-chart--sparkline">
+      @if (hasData()) {
+        <svg
+          class="ct-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="viewBox()"
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          [attr.aria-label]="svgAriaLabel()">
+          <g [style.color]="resolvedColor()">
+            @if (area()) {
+              <path class="ct-chart__area" [attr.d]="plot().area" />
+            }
+            <path class="ct-chart__line" [attr.d]="plot().line" />
+            @if (showLastDot() && plot().lastDot; as dot) {
+              <circle class="ct-chart__dot" [attr.cx]="dot.x" [attr.cy]="dot.y" r="2.5" />
+            }
+          </g>
+        </svg>
+
+        <div class="ct-chart__table-wrap">
+          <af-chart-data-table [model]="tableModel()" />
+        </div>
+      } @else {
+        <span class="ct-chart__empty" role="status">{{ i18n.noData }}</span>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AfChartDataTableComponent, selector: "af-chart-data-table", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSparklineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-sparkline',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfChartDataTableComponent],
+                    host: { style: 'display: inline-block' },
+                    template: `
+    <div class="ct-chart ct-chart--sparkline">
+      @if (hasData()) {
+        <svg
+          class="ct-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="viewBox()"
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          [attr.aria-label]="svgAriaLabel()">
+          <g [style.color]="resolvedColor()">
+            @if (area()) {
+              <path class="ct-chart__area" [attr.d]="plot().area" />
+            }
+            <path class="ct-chart__line" [attr.d]="plot().line" />
+            @if (showLastDot() && plot().lastDot; as dot) {
+              <circle class="ct-chart__dot" [attr.cx]="dot.x" [attr.cy]="dot.y" r="2.5" />
+            }
+          </g>
+        </svg>
+
+        <div class="ct-chart__table-wrap">
+          <af-chart-data-table [model]="tableModel()" />
+        </div>
+      } @else {
+        <span class="ct-chart__empty" role="status">{{ i18n.noData }}</span>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], showLastDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastDot", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }] } });
+
+/**
+ * Test harness for AfSparklineComponent.
+ *
+ * Wraps DOM queries behind a semantic API so tests read intent, not selectors.
+ *
+ * @example
+ * const harness = new AfSparklineHarness(fixture.nativeElement);
+ * expect(harness.getLinePath()).toMatch(/^M/);
+ * expect(harness.getDotCount()).toBe(1);
+ */
+class AfSparklineHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-sparkline');
+        if (!el) {
+            throw new Error('AfSparklineHarness: af-sparkline element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the sparkline `<svg>`, or null when the empty state is shown. */
+    getSvg() {
+        return this.hostEl.querySelector('svg.ct-chart__svg');
+    }
+    /** Returns the SVG's `aria-label`. */
+    getAriaLabel() {
+        return this.getSvg()?.getAttribute('aria-label') ?? null;
+    }
+    /** Returns the line `<path>` `d` attribute, or null when empty. */
+    getLinePath() {
+        return this.hostEl.querySelector('.ct-chart__line')?.getAttribute('d') ?? null;
+    }
+    /** Returns whether an area fill is rendered. */
+    hasArea() {
+        return this.hostEl.querySelector('.ct-chart__area') !== null;
+    }
+    /** Returns the number of point markers (0 or 1). */
+    getDotCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__dot').length;
+    }
+    /** Returns whether the empty-state message is shown. */
+    isEmpty() {
+        return this.hostEl.querySelector('.ct-chart__empty') !== null;
+    }
+    /** Returns the accessible data table element (always present when data exists). */
+    getTable() {
+        return this.hostEl.querySelector('table.ct-chart__table');
+    }
+    /** Returns the number of data-table body rows. */
+    getTableRowCount() {
+        return this.hostEl.querySelectorAll('.ct-chart__table tbody tr').length;
+    }
+}
+
+/** Inset (in viewBox units) so the arc stroke is never clipped at the viewBox edge. */
+const PAD = 4;
+/** Fixed viewBox width — the gauge keeps a square-ish aspect and scales fluidly. */
+const VIEW_WIDTH = 240;
+/** A full sweep can't be drawn as one arc; clamp the end angle just shy of 360°. */
+const MAX_RING_ANGLE = 359.999;
+/**
+ * Accessible single-value gauge for progress, compliance and utilisation metrics.
+ *
+ * Renders one metric as an SVG ring (full 360° track) or bottom-opening semi
+ * gauge, with the value drawn as a coloured arc over a muted track and the
+ * formatted number at the centre. Geometry is computed with the SSR-safe
+ * `chart-geometry` helpers — no DOM, `window` or `Date` access — so it renders
+ * identically on the server.
+ *
+ * The arc colour follows {@link AfGaugeThreshold} bands (the highest `from` ≤
+ * value wins) or the explicit {@link status} input when no band matches.
+ *
+ * @example Compliance ring
+ * <af-gauge ariaLabel="Compliance score" [value]="82" valueText="82%" caption="Compliance" />
+ *
+ * @example Utilisation with thresholds
+ * <af-gauge
+ *   ariaLabel="Quota utilisation"
+ *   [value]="95"
+ *   valueText="95%"
+ *   [thresholds]="[
+ *     { from: 0, status: 'success' },
+ *     { from: 80, status: 'warning' },
+ *     { from: 90, status: 'danger' },
+ *   ]" />
+ *
+ * @accessibility
+ * - Because a gauge conveys a single metric, the root element uses the WAI-ARIA
+ *   `meter` role with `aria-valuenow` / `aria-valuemin` / `aria-valuemax` and an
+ *   `aria-valuetext` carrying the human-readable value (e.g. `"82%"`). This is
+ *   more semantic than the data-table fallback used by the multi-value charts,
+ *   so no table is rendered here.
+ * - The SVG is purely decorative (`aria-hidden="true"`, `focusable="false"`);
+ *   the meter role carries everything assistive technology needs.
+ * - The centre value text mirrors `aria-valuetext`, so colour is never the sole
+ *   carrier of meaning (WCAG 1.4.1); the status colours come from the
+ *   contrast-checked `--color-state-*` tokens.
+ * - The empty/invalid state (`max <= min`) drops the `meter` role and exposes a
+ *   `role="status"` message instead, so the meter is never invalid.
+ * - All user-facing strings are configurable via {@link AF_CHART_I18N}.
+ */
+class AfGaugeComponent {
+    i18n = inject(AF_CHART_I18N);
+    /** Accessible label for the gauge (required by the WAI-ARIA `meter` role). */
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * The metric value. Clamped into `[min, max]` for the drawn arc and
+     * `aria-valuenow`; `aria-valuetext` reports the raw value unchanged.
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Lower bound of the gauge scale. */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** Upper bound of the gauge scale. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /**
+     * Colour threshold bands. The band with the highest `from` ≤ `value` selects
+     * the arc's `status`; if none match (or the list is empty), {@link status} is used.
+     */
+    thresholds = input([], ...(ngDevMode ? [{ debugName: "thresholds" }] : []));
+    /** Explicit colour bucket; overridden by a matching {@link thresholds} band. */
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /** `'ring'` = full 360° track; `'semi'` = bottom-opening 180° half gauge. */
+    shape = input('ring', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** Centre/`aria-valuetext` override; defaults to the locale-formatted `value`. */
+    valueText = input('', ...(ngDevMode ? [{ debugName: "valueText" }] : []));
+    /** Small caption rendered beneath the value (e.g. the metric name). */
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : []));
+    /** Arc thickness in viewBox units; drives both the arc radius and the rendered stroke. */
+    strokeWidth = input(14, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    /** Render the centre value (and caption) text. */
+    showValue = input(true, { ...(ngDevMode ? { debugName: "showValue" } : {}), transform: booleanAttribute });
+    /** BCP-47 locale for the default value formatting (e.g. `'de-DE'`). */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /** `Intl.NumberFormat` options for the default value formatting. */
+    valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
+    /** Gauge height in viewBox units (width scales fluidly to the container). */
+    height = input(200, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** True when the scale is degenerate (`max <= min`) — renders the empty state. */
+    isEmpty = computed(() => this.max() <= this.min(), ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    viewBox = computed(() => `0 0 ${VIEW_WIDTH} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    /** Human-readable value: the explicit override or the locale-formatted number. */
+    valueDisplay = computed(() => this.valueText() || formatNumber(this.value(), this.locale(), this.valueFormat()), ...(ngDevMode ? [{ debugName: "valueDisplay" }] : []));
+    /**
+     * `value` clamped into `[min, max]` for `aria-valuenow`. The WAI-ARIA `meter`
+     * role requires `valuenow ∈ [valuemin, valuemax]`; `aria-valuetext` keeps the
+     * raw reading so assistive tech still announces an out-of-range value verbatim.
+     */
+    clampedValue = computed(() => clamp(this.value(), this.min(), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    /** Arc thickness as a CSS length, fed to the `--ct-chart-gauge-width` token. */
+    gaugeWidth = computed(() => `${this.strokeWidth()}px`, ...(ngDevMode ? [{ debugName: "gaugeWidth" }] : []));
+    /**
+     * Resolved status bucket: the highest threshold band whose `from <= value`,
+     * falling back to the explicit {@link status} input.
+     */
+    resolvedStatus = computed(() => {
+        const value = this.value();
+        const sorted = [...this.thresholds()].sort((a, b) => a.from - b.from);
+        let match = null;
+        for (const band of sorted) {
+            if (band.from <= value)
+                match = band.status;
+        }
+        return match ?? this.status();
+    }, ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : []));
+    valueClass = computed(() => `ct-chart__gauge-value ct-chart__gauge-value--${this.resolvedStatus()}`, ...(ngDevMode ? [{ debugName: "valueClass" }] : []));
+    /** All geometry needed by the template, derived in a single pass. */
+    plot = computed(() => {
+        const height = this.height();
+        const isSemi = this.shape() === 'semi';
+        const cx = VIEW_WIDTH / 2;
+        const radius = Math.min(VIEW_WIDTH, height) / 2 - this.strokeWidth() / 2 - PAD;
+        const span = this.max() - this.min();
+        const fraction = span > 0 ? clamp((this.value() - this.min()) / span, 0, 1) : 0;
+        if (isSemi) {
+            // Bottom-opening half gauge: angles increase clockwise from -90° (9 o'clock)
+            // over the top (0°) to +90° (3 o'clock). Centre the arc vertically.
+            const cy = height / 2 + radius / 2;
+            const valueEnd = -90 + 180 * fraction;
+            return {
+                cx: roundTo(cx, 2),
+                cy: roundTo(cy, 2),
+                track: arcPath(cx, cy, radius, -90, 90),
+                value: fraction > 0 ? arcPath(cx, cy, radius, -90, valueEnd) : '',
+                textY: roundTo(cy - radius / 6, 2),
+            };
+        }
+        // Full ring: track is a closed circle; value sweeps clockwise from 12 o'clock.
+        const cy = height / 2;
+        const valueEnd = Math.min(360 * fraction, MAX_RING_ANGLE);
+        return {
+            cx: roundTo(cx, 2),
+            cy: roundTo(cy, 2),
+            track: arcPath(cx, cy, radius, 0, MAX_RING_ANGLE),
+            value: fraction > 0 ? arcPath(cx, cy, radius, 0, valueEnd) : '',
+            textY: roundTo(cy, 2),
+        };
+    }, ...(ngDevMode ? [{ debugName: "plot" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfGaugeComponent, isStandalone: true, selector: "af-gauge", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
+    <div
+      class="ct-chart"
+      [style.--ct-chart-gauge-width]="gaugeWidth()"
+      [attr.role]="isEmpty() ? null : 'meter'"
+      [attr.aria-label]="isEmpty() ? null : ariaLabel()"
+      [attr.aria-valuenow]="isEmpty() ? null : clampedValue()"
+      [attr.aria-valuemin]="isEmpty() ? null : min()"
+      [attr.aria-valuemax]="isEmpty() ? null : max()"
+      [attr.aria-valuetext]="isEmpty() ? null : valueDisplay()">
+      <figure class="ct-chart__figure">
+        @if (isEmpty()) {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        } @else {
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            aria-hidden="true"
+            focusable="false">
+            <path class="ct-chart__gauge-track" [attr.d]="plot().track" />
+            @if (plot().value) {
+              <path [class]="valueClass()" [attr.d]="plot().value" />
+            }
+            @if (showValue()) {
+              <text
+                class="ct-chart__gauge-text"
+                [attr.x]="plot().cx"
+                [attr.y]="plot().textY"
+                text-anchor="middle"
+                dominant-baseline="middle">
+                {{ valueDisplay() }}
+              </text>
+              @if (caption()) {
+                <text
+                  class="ct-chart__gauge-caption"
+                  [attr.x]="plot().cx"
+                  [attr.y]="plot().textY + 22"
+                  text-anchor="middle"
+                  dominant-baseline="middle">
+                  {{ caption() }}
+                </text>
+              }
+            }
+          </svg>
+        }
+      </figure>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfGaugeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'af-gauge',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: block' },
+                    template: `
+    <div
+      class="ct-chart"
+      [style.--ct-chart-gauge-width]="gaugeWidth()"
+      [attr.role]="isEmpty() ? null : 'meter'"
+      [attr.aria-label]="isEmpty() ? null : ariaLabel()"
+      [attr.aria-valuenow]="isEmpty() ? null : clampedValue()"
+      [attr.aria-valuemin]="isEmpty() ? null : min()"
+      [attr.aria-valuemax]="isEmpty() ? null : max()"
+      [attr.aria-valuetext]="isEmpty() ? null : valueDisplay()">
+      <figure class="ct-chart__figure">
+        @if (isEmpty()) {
+          <div class="ct-chart__empty" role="status">{{ i18n.noData }}</div>
+        } @else {
+          <svg
+            class="ct-chart__svg"
+            [attr.viewBox]="viewBox()"
+            preserveAspectRatio="xMidYMid meet"
+            aria-hidden="true"
+            focusable="false">
+            <path class="ct-chart__gauge-track" [attr.d]="plot().track" />
+            @if (plot().value) {
+              <path [class]="valueClass()" [attr.d]="plot().value" />
+            }
+            @if (showValue()) {
+              <text
+                class="ct-chart__gauge-text"
+                [attr.x]="plot().cx"
+                [attr.y]="plot().textY"
+                text-anchor="middle"
+                dominant-baseline="middle">
+                {{ valueDisplay() }}
+              </text>
+              @if (caption()) {
+                <text
+                  class="ct-chart__gauge-caption"
+                  [attr.x]="plot().cx"
+                  [attr.y]="plot().textY + 22"
+                  text-anchor="middle"
+                  dominant-baseline="middle">
+                  {{ caption() }}
+                </text>
+              }
+            }
+          </svg>
+        }
+      </figure>
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Test harness for AfGaugeComponent.
+ *
+ * Wraps DOM queries behind a semantic API so tests read intent, not selectors.
+ *
+ * @example
+ * const harness = new AfGaugeHarness(fixture.nativeElement);
+ * expect(harness.getRole()).toBe('meter');
+ * expect(harness.getAriaValueNow()).toBe('82');
+ */
+class AfGaugeHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-gauge');
+        if (!el) {
+            throw new Error('AfGaugeHarness: af-gauge element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the `.ct-chart` root that carries the `meter` role and value attributes. */
+    getRoot() {
+        return this.hostEl.querySelector('.ct-chart');
+    }
+    /** Returns the root's `role` (`'meter'` with data, null in the empty state). */
+    getRole() {
+        return this.getRoot()?.getAttribute('role') ?? null;
+    }
+    /** Returns the `aria-valuenow` of the meter root. */
+    getAriaValueNow() {
+        return this.getRoot()?.getAttribute('aria-valuenow') ?? null;
+    }
+    /** Returns the `aria-valuemin` of the meter root. */
+    getAriaValueMin() {
+        return this.getRoot()?.getAttribute('aria-valuemin') ?? null;
+    }
+    /** Returns the `aria-valuemax` of the meter root. */
+    getAriaValueMax() {
+        return this.getRoot()?.getAttribute('aria-valuemax') ?? null;
+    }
+    /** Returns the human-readable `aria-valuetext` of the meter root. */
+    getAriaValueText() {
+        return this.getRoot()?.getAttribute('aria-valuetext') ?? null;
+    }
+    /** Returns the `aria-label` of the meter root. */
+    getAriaLabel() {
+        return this.getRoot()?.getAttribute('aria-label') ?? null;
+    }
+    /** Returns the decorative `<svg>`, or null when the empty state is shown. */
+    getSvg() {
+        return this.hostEl.querySelector('svg.ct-chart__svg');
+    }
+    /**
+     * Returns the `--ct-chart-gauge-width` custom property (e.g. `'14px'`) that
+     * drives the rendered arc thickness, or null when unset.
+     */
+    getGaugeWidth() {
+        return this.getRoot()?.style.getPropertyValue('--ct-chart-gauge-width').trim() || null;
+    }
+    /** Returns the track arc `<path>`. */
+    getTrackPath() {
+        return this.hostEl.querySelector('path.ct-chart__gauge-track');
+    }
+    /** Returns the value arc `<path>` (absent when the value fraction is zero). */
+    getValuePath() {
+        return this.hostEl.querySelector('path.ct-chart__gauge-value');
+    }
+    /** Returns the `--status` modifier on the value arc (e.g. `'success'`), or null. */
+    getValueStatusClass() {
+        const path = this.getValuePath();
+        if (!path)
+            return null;
+        const modifier = Array.from(path.classList).find((c) => c.startsWith('ct-chart__gauge-value--'));
+        return modifier ? modifier.replace('ct-chart__gauge-value--', '') : null;
+    }
+    /** Returns the centre value text, or null when the value text is hidden. */
+    getCenterText() {
+        return this.hostEl.querySelector('.ct-chart__gauge-text')?.textContent?.trim() ?? null;
+    }
+    /** Returns the caption text below the value, or null when absent. */
+    getCaption() {
+        return this.hostEl.querySelector('.ct-chart__gauge-caption')?.textContent?.trim() ?? null;
+    }
+    /** Returns whether the empty-state message is shown. */
+    isEmpty() {
+        return this.hostEl.querySelector('.ct-chart__empty') !== null;
+    }
+}
+
 // Components
 
 /**
@@ -11341,5 +13626,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AF_TREE_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfInputHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective, AfTreeComponent, AfTreeHarness, AfTreeNodeHarness };
+export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_CHART_I18N, AF_CHART_PALETTE_SIZE, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AF_TREE_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBarChartComponent, AfBarChartHarness, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfChartDataTableComponent, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDonutChartComponent, AfDonutChartHarness, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfGaugeComponent, AfGaugeHarness, AfIconComponent, AfInputComponent, AfInputHarness, AfLineChartComponent, AfLineChartHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSparklineComponent, AfSparklineHarness, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective, AfTreeComponent, AfTreeHarness, AfTreeNodeHarness };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map