@mk-kit/ui 0.40.0 → 0.42.0

package/fesm2022/mk-kit-ui-data.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, booleanAttribute, signal, computed, numberAttribute, contentChildren, ElementRef, effect, output, inject, DestroyRef, afterNextRender, DOCUMENT, PLATFORM_ID, Injector, viewChild, model, forwardRef, untracked, contentChild, TemplateRef, Directive, afterRenderEffect, ViewEncapsulation } from '@angular/core';
-import { MkIcon } from '@mk-kit/ui/icon';
+import { input, ChangeDetectionStrategy, Component, booleanAttribute, inject, ElementRef, Renderer2, DOCUMENT, PLATFORM_ID, numberAttribute, computed, effect, Directive, signal, contentChildren, output, DestroyRef, afterNextRender, afterRenderEffect, untracked, Injector, viewChild, model, forwardRef, contentChild, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { mkUniqueId, MK_I18N, MkFieldContext, mkHighlight } from '@mk-kit/ui/core';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { MkIcon } from '@mk-kit/ui/icon';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MkCopyToClipboard } from '@mk-kit/ui/directives';
 import { mkMoveItemInArray, MkDropList, MkDrag } from '@mk-kit/ui/dnd';
@@ -151,6 +151,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "@if (!dot()) {\n  <ng-content />\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-1);height:1.375rem;min-width:1.375rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-badge--sm){height:1.125rem;min-width:1.125rem;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs)}:host(.mk-badge--lg){height:1.625rem;min-width:1.625rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-badge--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-badge--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-badge--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-badge--dot){width:.625rem;height:.625rem;min-width:0;padding:0;border-radius:var(--mk-radius-circle)}:host(.mk-badge--dot.mk-badge--sm){width:.5rem;height:.5rem}:host(.mk-badge--dot.mk-badge--lg){width:.75rem;height:.75rem}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
 
+/**
+ * Badge overlay — anchors a small badge (count, dot or short text) to a corner
+ * of ANY element: an icon button, an avatar, a tab label. The host stays a
+ * single tab stop; the badge is a decorative, non-focusable child.
+ *
+ * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
+ * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
+ * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
+ *   rendered in a visually hidden span and wired to the host with
+ *   `aria-describedby`, so it is announced after the host's own name even
+ *   when the host has an `aria-label`. When it is given, the visible badge is
+ *   `aria-hidden` so the count is not read twice.
+ * - Positions use logical insets, so `top-end` sits at the top-right in LTR
+ *   and the top-left in RTL.
+ *
+ * The badge is painted with the global `.mk-badge-overlay` styles from
+ * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
+ *
+ * ```html
+ * <button mkButton iconOnly aria-label="Notifications"
+ *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
+ *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
+ *   <mk-icon name="bell" />
+ * </button>
+ *
+ * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
+ *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
+ * ```
+ */
+class MkBadgeOverlay {
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * Badge content — a count or a short label. `null` / empty hides the badge
+     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
+     * so `mkBadgeOverlay="120"` also collapses to `99+`.
+     */
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlay' });
+    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
+    position = input('top-end', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayPosition' });
+    /** Semantic color tone (same scale as `mk-badge`). */
+    tone = input('primary', { ...(ngDevMode ? { debugName: "tone" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayTone' });
+    /** Render a textless dot instead of the content. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayDot',
+        transform: booleanAttribute });
+    /** Numbers above this render as `<max>+`. `0` disables the cap. */
+    max = input(99, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayMax',
+        transform: numberAttribute });
+    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayHidden',
+        transform: booleanAttribute });
+    /**
+     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
+     * host's description; the visible badge becomes `aria-hidden`.
+     */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayAriaLabel' });
+    /** The text painted in the badge (`''` in dot mode). */
+    label = computed(() => {
+        if (this.dot())
+            return '';
+        const raw = this.content();
+        if (raw === null || raw === undefined || raw === '')
+            return '';
+        const max = this.max();
+        const n = typeof raw === 'number' ? raw : /^\d+$/.test(raw) ? Number(raw) : NaN;
+        if (Number.isFinite(n) && max > 0 && n > max)
+            return `${max}+`;
+        return String(raw);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Whether the badge is currently rendered. */
+    visible = computed(() => !this.hidden() && (this.dot() || this.label() !== ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    srId = mkUniqueId('mk-badge-overlay');
+    badge = null;
+    sr = null;
+    /** Set when WE made the host positioned, so we can undo it on removal. */
+    positionedHost = false;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        effect(() => {
+            const visible = this.visible();
+            if (!visible) {
+                this.detach();
+                return;
+            }
+            const badge = this.attach();
+            const dot = this.dot();
+            const srText = this.ariaLabel().trim();
+            this.renderer.setAttribute(badge, 'data-tone', this.tone());
+            this.renderer.setAttribute(badge, 'data-position', this.position());
+            if (dot) {
+                this.renderer.addClass(badge, 'mk-badge-overlay--dot');
+            }
+            else {
+                this.renderer.removeClass(badge, 'mk-badge-overlay--dot');
+            }
+            this.renderer.setProperty(badge, 'textContent', this.label());
+            // A dot has nothing to read; a labelled badge is described via the
+            // hidden span instead — either way the visual is hidden from AT.
+            if (dot || srText) {
+                this.renderer.setAttribute(badge, 'aria-hidden', 'true');
+            }
+            else {
+                this.renderer.removeAttribute(badge, 'aria-hidden');
+            }
+            this.syncSr(srText);
+        });
+    }
+    attach() {
+        if (this.badge)
+            return this.badge;
+        const el = this.host.nativeElement;
+        const view = this.document.defaultView;
+        const position = view?.getComputedStyle(el).position;
+        if (!position || position === 'static') {
+            this.renderer.setStyle(el, 'position', 'relative');
+            this.positionedHost = true;
+        }
+        const badge = this.renderer.createElement('span');
+        this.renderer.addClass(badge, 'mk-badge-overlay');
+        this.renderer.appendChild(el, badge);
+        this.badge = badge;
+        return badge;
+    }
+    detach() {
+        if (this.badge) {
+            this.renderer.removeChild(this.host.nativeElement, this.badge);
+            this.badge = null;
+        }
+        this.syncSr('');
+        if (this.positionedHost) {
+            this.renderer.removeStyle(this.host.nativeElement, 'position');
+            this.positionedHost = false;
+        }
+    }
+    /** Create / update / remove the hidden description and its aria-describedby link. */
+    syncSr(text) {
+        const el = this.host.nativeElement;
+        if (text) {
+            if (!this.sr) {
+                const sr = this.renderer.createElement('span');
+                this.renderer.addClass(sr, 'mk-visually-hidden');
+                this.renderer.setAttribute(sr, 'id', this.srId);
+                this.renderer.appendChild(el, sr);
+                this.sr = sr;
+                const ids = (el.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+                if (!ids.includes(this.srId))
+                    ids.push(this.srId);
+                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
+            }
+            this.renderer.setProperty(this.sr, 'textContent', text);
+        }
+        else if (this.sr) {
+            this.renderer.removeChild(el, this.sr);
+            this.sr = null;
+            const ids = (el.getAttribute('aria-describedby') ?? '')
+                .split(/\s+/)
+                .filter((id) => id && id !== this.srId);
+            if (ids.length) {
+                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
+            }
+            else {
+                this.renderer.removeAttribute(el, 'aria-describedby');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkBadgeOverlay, isStandalone: true, selector: "[mkBadgeOverlay]", inputs: { content: { classPropertyName: "content", publicName: "mkBadgeOverlay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "mkBadgeOverlayPosition", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "mkBadgeOverlayTone", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "mkBadgeOverlayDot", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "mkBadgeOverlayMax", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "mkBadgeOverlayHidden", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "mkBadgeOverlayAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkBadgeOverlay]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayPosition", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayTone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayDot", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayMax", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayHidden", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayAriaLabel", required: false }] }] } });
+
 /**
  * Tag — a non-interactive label for categories, keywords or metadata. Unlike
  * {@link MkChip} it carries no interaction; use it purely for display.
@@ -1165,6 +1345,15 @@ function mkChartTapPin(apply) {
  */
 const CHAR_PX = 6.2;
 const estimateLabelPx = (label) => label.length * CHAR_PX;
+/**
+ * Fraction of its band a label may fill before `auto` tilts the axis.
+ *
+ * Not 1.0: labels that *technically* fit still read as a cramped run of words
+ * with no gap between them ("mar" "kwi" "maj" touching each other), which is
+ * the look tilting exists to avoid. Leaving a fifth of the band as breathing
+ * room tilts the tight cases and leaves genuinely roomy axes alone.
+ */
+const TILT_THRESHOLD = 0.8;
 /**
  * BarChart — compares a measure across categories with one or more series
  * (grouped or `stacked`), `vertical` (default) or `horizontal`. Dependency-free
@@ -1226,6 +1415,10 @@ class MkBarChart {
     /** Accessible summary; generated from the data when omitted. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Make bars clickable + keyboard-focusable (`role="button"`, accessible name) and emit `barClick`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A bar was clicked or activated with Enter / Space (needs `interactive`). */
+    barClick = output();
     hovered = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
     /** Tap-to-pin: a touch tap on a bar pins the tooltip until a tap lands
@@ -1253,7 +1446,7 @@ class MkBarChart {
         if (!count)
             return 0;
         const band = Math.max(this.drawWidth() - 58, 1) / count;
-        return this.widestLabelPx() <= band ? 0 : 45;
+        return this.widestLabelPx() <= band * TILT_THRESHOLD ? 0 : 45;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedAngle" }] : /* istanbul ignore next */ []));
     /**
@@ -1471,6 +1664,22 @@ class MkBarChart {
         return `Bar chart of ${s.map((x) => x.name).join(', ')} across ${cats.length} categories`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    emitBar(b, event) {
+        if (!this.interactive())
+            return;
+        if (event instanceof KeyboardEvent) {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+        }
+        const series = this.series()[b.seriesIndex];
+        if (!series)
+            return;
+        this.barClick.emit({ series, seriesIndex: b.seriesIndex, category: this.categories()[b.categoryIndex] ?? '', categoryIndex: b.categoryIndex, value: b.value });
+    }
+    barLabel(b) {
+        return `${this.series()[b.seriesIndex]?.name ?? ''}, ${this.categories()[b.categoryIndex] ?? ''}: ${b.value}`;
+    }
     setHover(bar) {
         this.tapPin.hover(bar);
     }
@@ -1478,7 +1687,7 @@ class MkBarChart {
         this.tapPin.pin(bar, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBarChart, isStandalone: true, selector: "mk-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, labelAngle: { classPropertyName: "labelAngle", publicName: "labelAngle", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-bar-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y1\"\n          [attr.y2]=\"row.y2\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label\"\n        [class.mk-chart__axis-label--y]=\"!horizontal()\"\n        [class.mk-chart__axis-label--x]=\"horizontal()\"\n        [attr.x]=\"row.labelX\"\n        [attr.y]=\"row.labelY\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Bars -->\n    @for (b of bars(); track b.categoryIndex + '-' + b.seriesIndex) {\n      <rect\n        class=\"mk-chart__bar\"\n        [class.mk-chart__bar--dim]=\"hovered() && hovered() !== b\"\n        [attr.x]=\"b.x\"\n        [attr.y]=\"b.y\"\n        [attr.width]=\"b.w\"\n        [attr.height]=\"b.h\"\n        [style.fill]=\"b.color\"\n        rx=\"3\"\n        (pointerenter)=\"setHover(b)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(b, $event)\"\n      />\n    }\n\n    <!-- Category labels. Tracked by index, not label: a 12-month window can\n         start and end in the same month, and thinned axes repeat the empty\n         string \u2014 both are duplicate keys (NG0955). -->\n    @for (band of bands(); track $index) {\n      @if (band.label) {\n        <text\n          class=\"mk-chart__axis-label\"\n          [class.mk-chart__axis-label--x]=\"!horizontal() && !band.transform\"\n          [class.mk-chart__axis-label--tilted]=\"band.transform\"\n          [class.mk-chart__axis-label--y]=\"horizontal()\"\n          [attr.x]=\"band.labelX\"\n          [attr.y]=\"band.labelY\"\n          [attr.transform]=\"band.transform\"\n        >\n          {{ band.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div\n      class=\"mk-chart__tooltip\"\n      [style.left.%]=\"t.left\"\n      [style.top.%]=\"t.top\"\n    >\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        @if (t.multi) {\n          <span class=\"mk-chart__tooltip-name\">{{ t.series }}</span>\n        }\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBarChart, isStandalone: true, selector: "mk-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, labelAngle: { classPropertyName: "labelAngle", publicName: "labelAngle", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-bar-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y1\"\n          [attr.y2]=\"row.y2\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label\"\n        [class.mk-chart__axis-label--y]=\"!horizontal()\"\n        [class.mk-chart__axis-label--x]=\"horizontal()\"\n        [attr.x]=\"row.labelX\"\n        [attr.y]=\"row.labelY\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Bars -->\n    @for (b of bars(); track b.categoryIndex + '-' + b.seriesIndex) {\n      <rect\n        class=\"mk-chart__bar\"\n        [class.mk-chart__bar--dim]=\"hovered() && hovered() !== b\"\n        [attr.x]=\"b.x\"\n        [attr.y]=\"b.y\"\n        [attr.width]=\"b.w\"\n        [attr.height]=\"b.h\"\n        [style.fill]=\"b.color\"\n        rx=\"3\"\n        [class.mk-chart__bar--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? barLabel(b) : null\"\n        (pointerenter)=\"setHover(b)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(b, $event)\"\n        (click)=\"emitBar(b)\"\n        (keydown)=\"emitBar(b, $event)\"\n        (focus)=\"setHover(b)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n\n    <!-- Category labels. Tracked by index, not label: a 12-month window can\n         start and end in the same month, and thinned axes repeat the empty\n         string \u2014 both are duplicate keys (NG0955). -->\n    @for (band of bands(); track $index) {\n      @if (band.label) {\n        <text\n          class=\"mk-chart__axis-label\"\n          [class.mk-chart__axis-label--x]=\"!horizontal() && !band.transform\"\n          [class.mk-chart__axis-label--tilted]=\"band.transform\"\n          [class.mk-chart__axis-label--y]=\"horizontal()\"\n          [attr.x]=\"band.labelX\"\n          [attr.y]=\"band.labelY\"\n          [attr.transform]=\"band.transform\"\n        >\n          {{ band.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div\n      class=\"mk-chart__tooltip\"\n      [style.left.%]=\"t.left\"\n      [style.top.%]=\"t.top\"\n    >\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        @if (t.multi) {\n          <span class=\"mk-chart__tooltip-name\">{{ t.series }}</span>\n        }\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBarChart, decorators: [{
             type: Component,
@@ -1486,8 +1695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-bar-chart',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y1\"\n          [attr.y2]=\"row.y2\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label\"\n        [class.mk-chart__axis-label--y]=\"!horizontal()\"\n        [class.mk-chart__axis-label--x]=\"horizontal()\"\n        [attr.x]=\"row.labelX\"\n        [attr.y]=\"row.labelY\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Bars -->\n    @for (b of bars(); track b.categoryIndex + '-' + b.seriesIndex) {\n      <rect\n        class=\"mk-chart__bar\"\n        [class.mk-chart__bar--dim]=\"hovered() && hovered() !== b\"\n        [attr.x]=\"b.x\"\n        [attr.y]=\"b.y\"\n        [attr.width]=\"b.w\"\n        [attr.height]=\"b.h\"\n        [style.fill]=\"b.color\"\n        rx=\"3\"\n        (pointerenter)=\"setHover(b)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(b, $event)\"\n      />\n    }\n\n    <!-- Category labels. Tracked by index, not label: a 12-month window can\n         start and end in the same month, and thinned axes repeat the empty\n         string \u2014 both are duplicate keys (NG0955). -->\n    @for (band of bands(); track $index) {\n      @if (band.label) {\n        <text\n          class=\"mk-chart__axis-label\"\n          [class.mk-chart__axis-label--x]=\"!horizontal() && !band.transform\"\n          [class.mk-chart__axis-label--tilted]=\"band.transform\"\n          [class.mk-chart__axis-label--y]=\"horizontal()\"\n          [attr.x]=\"band.labelX\"\n          [attr.y]=\"band.labelY\"\n          [attr.transform]=\"band.transform\"\n        >\n          {{ band.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div\n      class=\"mk-chart__tooltip\"\n      [style.left.%]=\"t.left\"\n      [style.top.%]=\"t.top\"\n    >\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        @if (t.multi) {\n          <span class=\"mk-chart__tooltip-name\">{{ t.series }}</span>\n        }\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"] }]
-        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], labelAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAngle", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y1\"\n          [attr.y2]=\"row.y2\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label\"\n        [class.mk-chart__axis-label--y]=\"!horizontal()\"\n        [class.mk-chart__axis-label--x]=\"horizontal()\"\n        [attr.x]=\"row.labelX\"\n        [attr.y]=\"row.labelY\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Bars -->\n    @for (b of bars(); track b.categoryIndex + '-' + b.seriesIndex) {\n      <rect\n        class=\"mk-chart__bar\"\n        [class.mk-chart__bar--dim]=\"hovered() && hovered() !== b\"\n        [attr.x]=\"b.x\"\n        [attr.y]=\"b.y\"\n        [attr.width]=\"b.w\"\n        [attr.height]=\"b.h\"\n        [style.fill]=\"b.color\"\n        rx=\"3\"\n        [class.mk-chart__bar--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? barLabel(b) : null\"\n        (pointerenter)=\"setHover(b)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(b, $event)\"\n        (click)=\"emitBar(b)\"\n        (keydown)=\"emitBar(b, $event)\"\n        (focus)=\"setHover(b)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n\n    <!-- Category labels. Tracked by index, not label: a 12-month window can\n         start and end in the same month, and thinned axes repeat the empty\n         string \u2014 both are duplicate keys (NG0955). -->\n    @for (band of bands(); track $index) {\n      @if (band.label) {\n        <text\n          class=\"mk-chart__axis-label\"\n          [class.mk-chart__axis-label--x]=\"!horizontal() && !band.transform\"\n          [class.mk-chart__axis-label--tilted]=\"band.transform\"\n          [class.mk-chart__axis-label--y]=\"horizontal()\"\n          [attr.x]=\"band.labelX\"\n          [attr.y]=\"band.labelY\"\n          [attr.transform]=\"band.transform\"\n        >\n          {{ band.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div\n      class=\"mk-chart__tooltip\"\n      [style.left.%]=\"t.left\"\n      [style.top.%]=\"t.top\"\n    >\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        @if (t.multi) {\n          <span class=\"mk-chart__tooltip-name\">{{ t.series }}</span>\n        }\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"] }]
+        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], labelAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAngle", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
 
 const MARGIN$2 = { top: 14, right: 16, bottom: 30, left: 44 };
 /** Closed path filling between an upper (`top`) and lower (`bottom`) line. */
@@ -1553,6 +1762,10 @@ class MkLineChart {
     /** Accessible summary; generated from the data when omitted. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Make x positions keyboard-focusable (`role="button"`, accessible name) and emit `pointClick`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A category (x position) was clicked or activated with Enter / Space (needs `interactive`). */
+    pointClick = output();
     hoverIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoverIndex" }] : /* istanbul ignore next */ []));
     /** Tap-to-pin: a touch tap on a hit band pins the tooltip until a tap lands
@@ -1726,6 +1939,24 @@ class MkLineChart {
         return `Line chart of ${s.map((x) => x.name).join(', ')} over ${this.categories().length} points`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    emitPoint(index, event) {
+        if (!this.interactive())
+            return;
+        if (event instanceof KeyboardEvent) {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+        }
+        this.pointClick.emit({
+            index,
+            category: this.categories()[index] ?? '',
+            values: this.series().map((series) => ({ series, value: series.data[index] ?? 0 })),
+        });
+    }
+    pointLabel(index) {
+        const values = this.series().map((s) => `${s.name} ${s.data[index] ?? 0}`).join(', ');
+        return `${this.categories()[index] ?? ''}: ${values}`;
+    }
     setHover(index) {
         this.tapPin.hover(index);
     }
@@ -1733,7 +1964,7 @@ class MkLineChart {
         this.tapPin.pin(index, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkLineChart, isStandalone: true, selector: "mk-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-line-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"plot().x\"\n          [attr.x2]=\"plot().x + plot().w\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Areas + lines -->\n    @for (r of rendered(); track r.name) {\n      @if (fillAreas()) {\n        <path class=\"mk-chart__area\" [attr.d]=\"r.area\" [style.fill]=\"r.color\" />\n      }\n      <path class=\"mk-chart__line\" [attr.d]=\"r.line\" [style.stroke]=\"r.color\" />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n\n    <!-- Category labels -->\n    @for (cat of categories(); track $index; let i = $index) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"plot().x + (categories().length > 1 ? (i * plot().w) / (categories().length - 1) : plot().w / 2)\"\n        [attr.y]=\"height() - 10\"\n      >\n        {{ cat }}\n      </text>\n    }\n\n    <!-- Hover crosshair + active point markers -->\n    @if (crosshairX(); as cx) {\n      <line\n        class=\"mk-chart__crosshair\"\n        [attr.x1]=\"cx\"\n        [attr.x2]=\"cx\"\n        [attr.y1]=\"plot().y\"\n        [attr.y2]=\"plot().y + plot().h\"\n      />\n      @for (p of activePoints(); track p.name) {\n        <circle\n          class=\"mk-chart__dot\"\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"4\"\n          [style.fill]=\"p.color\"\n        />\n      }\n    }\n\n    <!-- Transparent hit bands -->\n    @for (band of hitBands(); track band.index) {\n      <rect\n        [attr.x]=\"band.x\"\n        [attr.y]=\"band.y\"\n        [attr.width]=\"band.w\"\n        [attr.height]=\"band.h\"\n        fill=\"transparent\"\n        (pointerenter)=\"setHover(band.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(band.index, $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      @for (row of t.rows; track row.name) {\n        <span class=\"mk-chart__tooltip-row\">\n          <span class=\"mk-chart__swatch\" [style.background]=\"row.color\"></span>\n          @if (t.multi) {\n            <span class=\"mk-chart__tooltip-name\">{{ row.name }}</span>\n          }\n          <span class=\"mk-chart__tooltip-value\">{{ row.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkLineChart, isStandalone: true, selector: "mk-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-line-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"plot().x\"\n          [attr.x2]=\"plot().x + plot().w\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Areas + lines -->\n    @for (r of rendered(); track r.name) {\n      @if (fillAreas()) {\n        <path class=\"mk-chart__area\" [attr.d]=\"r.area\" [style.fill]=\"r.color\" />\n      }\n      <path class=\"mk-chart__line\" [attr.d]=\"r.line\" [style.stroke]=\"r.color\" />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n\n    <!-- Category labels -->\n    @for (cat of categories(); track $index; let i = $index) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"plot().x + (categories().length > 1 ? (i * plot().w) / (categories().length - 1) : plot().w / 2)\"\n        [attr.y]=\"height() - 10\"\n      >\n        {{ cat }}\n      </text>\n    }\n\n    <!-- Hover crosshair + active point markers -->\n    @if (crosshairX(); as cx) {\n      <line\n        class=\"mk-chart__crosshair\"\n        [attr.x1]=\"cx\"\n        [attr.x2]=\"cx\"\n        [attr.y1]=\"plot().y\"\n        [attr.y2]=\"plot().y + plot().h\"\n      />\n      @for (p of activePoints(); track p.name) {\n        <circle\n          class=\"mk-chart__dot\"\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"4\"\n          [style.fill]=\"p.color\"\n        />\n      }\n    }\n\n    <!-- Transparent hit bands -->\n    @for (band of hitBands(); track band.index) {\n      <rect\n        [attr.x]=\"band.x\"\n        [attr.y]=\"band.y\"\n        [attr.width]=\"band.w\"\n        [attr.height]=\"band.h\"\n        fill=\"transparent\"\n        [class.mk-chart__band--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? pointLabel(band.index) : null\"\n        (pointerenter)=\"setHover(band.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(band.index, $event)\"\n        (click)=\"emitPoint(band.index)\"\n        (keydown)=\"emitPoint(band.index, $event)\"\n        (focus)=\"setHover(band.index)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      @for (row of t.rows; track row.name) {\n        <span class=\"mk-chart__tooltip-row\">\n          <span class=\"mk-chart__swatch\" [style.background]=\"row.color\"></span>\n          @if (t.multi) {\n            <span class=\"mk-chart__tooltip-name\">{{ row.name }}</span>\n          }\n          <span class=\"mk-chart__tooltip-value\">{{ row.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLineChart, decorators: [{
             type: Component,
@@ -1741,8 +1972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-line-chart',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"plot().x\"\n          [attr.x2]=\"plot().x + plot().w\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Areas + lines -->\n    @for (r of rendered(); track r.name) {\n      @if (fillAreas()) {\n        <path class=\"mk-chart__area\" [attr.d]=\"r.area\" [style.fill]=\"r.color\" />\n      }\n      <path class=\"mk-chart__line\" [attr.d]=\"r.line\" [style.stroke]=\"r.color\" />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n\n    <!-- Category labels -->\n    @for (cat of categories(); track $index; let i = $index) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"plot().x + (categories().length > 1 ? (i * plot().w) / (categories().length - 1) : plot().w / 2)\"\n        [attr.y]=\"height() - 10\"\n      >\n        {{ cat }}\n      </text>\n    }\n\n    <!-- Hover crosshair + active point markers -->\n    @if (crosshairX(); as cx) {\n      <line\n        class=\"mk-chart__crosshair\"\n        [attr.x1]=\"cx\"\n        [attr.x2]=\"cx\"\n        [attr.y1]=\"plot().y\"\n        [attr.y2]=\"plot().y + plot().h\"\n      />\n      @for (p of activePoints(); track p.name) {\n        <circle\n          class=\"mk-chart__dot\"\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"4\"\n          [style.fill]=\"p.color\"\n        />\n      }\n    }\n\n    <!-- Transparent hit bands -->\n    @for (band of hitBands(); track band.index) {\n      <rect\n        [attr.x]=\"band.x\"\n        [attr.y]=\"band.y\"\n        [attr.width]=\"band.w\"\n        [attr.height]=\"band.h\"\n        fill=\"transparent\"\n        (pointerenter)=\"setHover(band.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(band.index, $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      @for (row of t.rows; track row.name) {\n        <span class=\"mk-chart__tooltip-row\">\n          <span class=\"mk-chart__swatch\" [style.background]=\"row.color\"></span>\n          @if (t.multi) {\n            <span class=\"mk-chart__tooltip-name\">{{ row.name }}</span>\n          }\n          <span class=\"mk-chart__tooltip-value\">{{ row.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"] }]
-        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + drawWidth() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    focusable=\"false\"\n  >\n    <!-- Gridlines + value-axis labels -->\n    @for (row of gridRows(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"plot().x\"\n          [attr.x2]=\"plot().x + plot().w\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- Areas + lines -->\n    @for (r of rendered(); track r.name) {\n      @if (fillAreas()) {\n        <path class=\"mk-chart__area\" [attr.d]=\"r.area\" [style.fill]=\"r.color\" />\n      }\n      <path class=\"mk-chart__line\" [attr.d]=\"r.line\" [style.stroke]=\"r.color\" />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n\n    <!-- Category labels -->\n    @for (cat of categories(); track $index; let i = $index) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"plot().x + (categories().length > 1 ? (i * plot().w) / (categories().length - 1) : plot().w / 2)\"\n        [attr.y]=\"height() - 10\"\n      >\n        {{ cat }}\n      </text>\n    }\n\n    <!-- Hover crosshair + active point markers -->\n    @if (crosshairX(); as cx) {\n      <line\n        class=\"mk-chart__crosshair\"\n        [attr.x1]=\"cx\"\n        [attr.x2]=\"cx\"\n        [attr.y1]=\"plot().y\"\n        [attr.y2]=\"plot().y + plot().h\"\n      />\n      @for (p of activePoints(); track p.name) {\n        <circle\n          class=\"mk-chart__dot\"\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"4\"\n          [style.fill]=\"p.color\"\n        />\n      }\n    }\n\n    <!-- Transparent hit bands -->\n    @for (band of hitBands(); track band.index) {\n      <rect\n        [attr.x]=\"band.x\"\n        [attr.y]=\"band.y\"\n        [attr.width]=\"band.w\"\n        [attr.height]=\"band.h\"\n        fill=\"transparent\"\n        [class.mk-chart__band--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? pointLabel(band.index) : null\"\n        (pointerenter)=\"setHover(band.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(band.index, $event)\"\n        (click)=\"emitPoint(band.index)\"\n        (keydown)=\"emitPoint(band.index, $event)\"\n        (focus)=\"setHover(band.index)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">{{ t.category }}</span>\n      @for (row of t.rows; track row.name) {\n        <span class=\"mk-chart__tooltip-row\">\n          <span class=\"mk-chart__swatch\" [style.background]=\"row.color\"></span>\n          @if (t.multi) {\n            <span class=\"mk-chart__tooltip-name\">{{ row.name }}</span>\n          }\n          <span class=\"mk-chart__tooltip-value\">{{ row.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartCategory }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (cat of categories(); track cat; let c = $index) {\n      <tr>\n        <th scope=\"row\">{{ cat }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[c] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"] }]
+        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
 
 /**
  * DonutChart — proportions of a whole as a ring (or a full pie when
@@ -1775,6 +2006,14 @@ class MkDonutChart {
     /** Accessible summary; generated from the data when omitted. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Make slices (and legend rows) clickable and keyboard-focusable: they get
+     * `role="button"` + an accessible name and emit `sliceClick`. Off by default —
+     * the chart stays a static picture with its screen-reader table.
+     */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A slice was clicked or activated with Enter / Space (needs `interactive`). */
+    sliceClick = output();
     hovered = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
     /** Tap-to-pin: a touch tap on a slice pins the tooltip until a tap lands
@@ -1855,6 +2094,22 @@ class MkDonutChart {
         return `Donut chart with ${s.length} slices totalling ${mkFormatCompact(this.total())}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    emitSlice(index, event) {
+        if (!this.interactive())
+            return;
+        if (event instanceof KeyboardEvent) {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+        }
+        const slice = this.slices()[index];
+        if (slice)
+            this.sliceClick.emit({ slice, index });
+    }
+    sliceLabel(index) {
+        const s = this.slices()[index];
+        return s ? `${s.name}: ${s.value}` : '';
+    }
     setHover(index) {
         this.tapPin.hover(index);
     }
@@ -1862,7 +2117,7 @@ class MkDonutChart {
         this.tapPin.pin(index, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDonutChart, isStandalone: true, selector: "mk-donut-chart", inputs: { slices: { classPropertyName: "slices", publicName: "slices", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerSublabel: { classPropertyName: "centerSublabel", publicName: "centerSublabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-donut-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame mk-donut__frame\" [style.max-width.px]=\"size()\">\n  <svg\n    class=\"mk-chart__svg mk-donut__svg\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    @for (g of geom(); track g.index) {\n      <path\n        class=\"mk-chart__slice\"\n        [class.mk-chart__slice--dim]=\"hovered() !== null && hovered() !== g.index\"\n        [attr.d]=\"g.path\"\n        [style.fill]=\"g.color\"\n        (pointerenter)=\"setHover(g.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(g.index, $event)\"\n      />\n    }\n  </svg>\n\n  @if (innerRadius() > 0 && (centerLabel() || centerSublabel())) {\n    <div class=\"mk-donut__center\">\n      @if (centerLabel()) {\n        <span class=\"mk-donut__center-label\">{{ centerLabel() }}</span>\n      }\n      @if (centerSublabel()) {\n        <span class=\"mk-donut__center-sublabel\">{{ centerSublabel() }}</span>\n      }\n    </div>\n  }\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        <span class=\"mk-chart__tooltip-name\">{{ t.name }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }} ({{ t.percent }}%)</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <ul class=\"mk-chart__legend mk-donut__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n        <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr><th scope=\"col\">{{ i18n.chartSlice }}</th><th scope=\"col\">{{ i18n.chartValue }}</th></tr>\n  </thead>\n  <tbody>\n    @for (s of slices(); track s.name) {\n      <tr><th scope=\"row\">{{ s.name }}</th><td>{{ s.value }}</td></tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDonutChart, isStandalone: true, selector: "mk-donut-chart", inputs: { slices: { classPropertyName: "slices", publicName: "slices", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerSublabel: { classPropertyName: "centerSublabel", publicName: "centerSublabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-donut-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame mk-donut__frame\" [style.max-width.px]=\"size()\">\n  <svg\n    class=\"mk-chart__svg mk-donut__svg\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    focusable=\"false\"\n  >\n    @for (g of geom(); track g.index) {\n      <path\n        class=\"mk-chart__slice\"\n        [class.mk-chart__slice--dim]=\"hovered() !== null && hovered() !== g.index\"\n        [attr.d]=\"g.path\"\n        [style.fill]=\"g.color\"\n        [class.mk-chart__slice--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? sliceLabel(g.index) : null\"\n        (pointerenter)=\"setHover(g.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(g.index, $event)\"\n        (click)=\"emitSlice(g.index)\"\n        (keydown)=\"emitSlice(g.index, $event)\"\n        (focus)=\"setHover(g.index)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n  </svg>\n\n  @if (innerRadius() > 0 && (centerLabel() || centerSublabel())) {\n    <div class=\"mk-donut__center\">\n      @if (centerLabel()) {\n        <span class=\"mk-donut__center-label\">{{ centerLabel() }}</span>\n      }\n      @if (centerSublabel()) {\n        <span class=\"mk-donut__center-sublabel\">{{ centerSublabel() }}</span>\n      }\n    </div>\n  }\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        <span class=\"mk-chart__tooltip-name\">{{ t.name }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }} ({{ t.percent }}%)</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <ul class=\"mk-chart__legend mk-donut__legend\">\n    @for (item of legend(); track item.name; let i = $index) {\n      <li class=\"mk-chart__legend-item\">\n        @if (interactive()) {\n          <button type=\"button\" class=\"mk-chart__legend-button\" (click)=\"emitSlice(i)\">\n            <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n            <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n            <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n          </button>\n        } @else {\n          <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n          <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n          <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n        }\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr><th scope=\"col\">{{ i18n.chartSlice }}</th><th scope=\"col\">{{ i18n.chartValue }}</th></tr>\n  </thead>\n  <tbody>\n    @for (s of slices(); track s.name) {\n      <tr><th scope=\"row\">{{ s.name }}</th><td>{{ s.value }}</td></tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDonutChart, decorators: [{
             type: Component,
@@ -1870,8 +2125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-donut-chart',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<div class=\"mk-chart__frame mk-donut__frame\" [style.max-width.px]=\"size()\">\n  <svg\n    class=\"mk-chart__svg mk-donut__svg\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    @for (g of geom(); track g.index) {\n      <path\n        class=\"mk-chart__slice\"\n        [class.mk-chart__slice--dim]=\"hovered() !== null && hovered() !== g.index\"\n        [attr.d]=\"g.path\"\n        [style.fill]=\"g.color\"\n        (pointerenter)=\"setHover(g.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(g.index, $event)\"\n      />\n    }\n  </svg>\n\n  @if (innerRadius() > 0 && (centerLabel() || centerSublabel())) {\n    <div class=\"mk-donut__center\">\n      @if (centerLabel()) {\n        <span class=\"mk-donut__center-label\">{{ centerLabel() }}</span>\n      }\n      @if (centerSublabel()) {\n        <span class=\"mk-donut__center-sublabel\">{{ centerSublabel() }}</span>\n      }\n    </div>\n  }\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        <span class=\"mk-chart__tooltip-name\">{{ t.name }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }} ({{ t.percent }}%)</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <ul class=\"mk-chart__legend mk-donut__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n        <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr><th scope=\"col\">{{ i18n.chartSlice }}</th><th scope=\"col\">{{ i18n.chartValue }}</th></tr>\n  </thead>\n  <tbody>\n    @for (s of slices(); track s.name) {\n      <tr><th scope=\"row\">{{ s.name }}</th><td>{{ s.value }}</td></tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"] }]
-        }], propDecorators: { slices: [{ type: i0.Input, args: [{ isSignal: true, alias: "slices", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerSublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerSublabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+                    }, template: "<div class=\"mk-chart__frame mk-donut__frame\" [style.max-width.px]=\"size()\">\n  <svg\n    class=\"mk-chart__svg mk-donut__svg\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    [attr.aria-hidden]=\"interactive() ? null : true\"\n    [attr.aria-label]=\"interactive() ? resolvedLabel() : null\"\n    [attr.role]=\"interactive() ? 'group' : null\"\n    focusable=\"false\"\n  >\n    @for (g of geom(); track g.index) {\n      <path\n        class=\"mk-chart__slice\"\n        [class.mk-chart__slice--dim]=\"hovered() !== null && hovered() !== g.index\"\n        [attr.d]=\"g.path\"\n        [style.fill]=\"g.color\"\n        [class.mk-chart__slice--interactive]=\"interactive()\"\n        [attr.role]=\"interactive() ? 'button' : null\"\n        [attr.tabindex]=\"interactive() ? 0 : null\"\n        [attr.aria-label]=\"interactive() ? sliceLabel(g.index) : null\"\n        (pointerenter)=\"setHover(g.index)\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(g.index, $event)\"\n        (click)=\"emitSlice(g.index)\"\n        (keydown)=\"emitSlice(g.index, $event)\"\n        (focus)=\"setHover(g.index)\"\n        (blur)=\"setHover(null)\"\n      />\n    }\n  </svg>\n\n  @if (innerRadius() > 0 && (centerLabel() || centerSublabel())) {\n    <div class=\"mk-donut__center\">\n      @if (centerLabel()) {\n        <span class=\"mk-donut__center-label\">{{ centerLabel() }}</span>\n      }\n      @if (centerSublabel()) {\n        <span class=\"mk-donut__center-sublabel\">{{ centerSublabel() }}</span>\n      }\n    </div>\n  }\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        <span class=\"mk-chart__tooltip-name\">{{ t.name }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.value }} ({{ t.percent }}%)</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <ul class=\"mk-chart__legend mk-donut__legend\">\n    @for (item of legend(); track item.name; let i = $index) {\n      <li class=\"mk-chart__legend-item\">\n        @if (interactive()) {\n          <button type=\"button\" class=\"mk-chart__legend-button\" (click)=\"emitSlice(i)\">\n            <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n            <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n            <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n          </button>\n        } @else {\n          <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n          <span class=\"mk-donut__legend-name\">{{ item.name }}</span>\n          <span class=\"mk-donut__legend-value\">{{ item.value }} \u00B7 {{ item.percent }}%</span>\n        }\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr><th scope=\"col\">{{ i18n.chartSlice }}</th><th scope=\"col\">{{ i18n.chartValue }}</th></tr>\n  </thead>\n  <tbody>\n    @for (s of slices(); track s.name) {\n      <tr><th scope=\"row\">{{ s.name }}</th><td>{{ s.value }}</td></tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"] }]
+        }], propDecorators: { slices: [{ type: i0.Input, args: [{ isSignal: true, alias: "slices", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerSublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerSublabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], sliceClick: [{ type: i0.Output, args: ["sliceClick"] }] } });
 
 /**
  * Gauge — a single-metric radial dial (a KPI: "68% of quota"). Dependency-free
@@ -2145,7 +2400,7 @@ class MkScatterChart {
         this.tapPin.pin(key, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkScatterChart, isStandalone: true, selector: "mk-scatter-chart", inputs: { series: { classPropertyName: "series", publicName: "series", 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 }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, bubble: { classPropertyName: "bubble", publicName: "bubble", isSignal: true, isRequired: false, transformFunction: null }, maxRadius: { classPropertyName: "maxRadius", publicName: "maxRadius", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-scatter-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Horizontal gridlines + y-axis labels -->\n    @for (row of yGrid(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- x-axis labels -->\n    @for (col of xGrid(); track col.value) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"col.x\"\n        [attr.y]=\"height() - 12\"\n      >\n        {{ col.label }}\n      </text>\n    }\n\n    <!-- Axis titles -->\n    @if (xLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--x\"\n        [attr.x]=\"plot().x + plot().w / 2\"\n        [attr.y]=\"height() - 1\"\n      >\n        {{ xLabel() }}\n      </text>\n    }\n    @if (yLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--y\"\n        [attr.transform]=\"'rotate(-90 10 ' + (plot().y + plot().h / 2) + ')'\"\n        [attr.x]=\"10\"\n        [attr.y]=\"plot().y + plot().h / 2\"\n      >\n        {{ yLabel() }}\n      </text>\n    }\n\n    <!-- Points -->\n    @for (p of points(); track $index; let i = $index) {\n      <circle\n        class=\"mk-chart__point\"\n        [class.mk-chart__point--active]=\"hoverKey() === keyOf(i)\"\n        [attr.cx]=\"p.cx\"\n        [attr.cy]=\"p.cy\"\n        [attr.r]=\"p.r\"\n        [style.fill]=\"p.color\"\n        (pointerenter)=\"setHover(keyOf(i))\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(keyOf(i), $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        {{ t.title }}\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ xLabel() || 'x' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.x }}</span>\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ yLabel() || 'y' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.y }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartSeries }}</th>\n      <th scope=\"col\">{{ xLabel() || 'x' }}</th>\n      <th scope=\"col\">{{ yLabel() || 'y' }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (s of series(); track s.name) {\n      @for (p of s.points; track $index) {\n        <tr>\n          <th scope=\"row\">{{ s.name }}</th>\n          <td>{{ p.x }}</td>\n          <td>{{ p.y }}</td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkScatterChart, isStandalone: true, selector: "mk-scatter-chart", inputs: { series: { classPropertyName: "series", publicName: "series", 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 }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, bubble: { classPropertyName: "bubble", publicName: "bubble", isSignal: true, isRequired: false, transformFunction: null }, maxRadius: { classPropertyName: "maxRadius", publicName: "maxRadius", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-scatter-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Horizontal gridlines + y-axis labels -->\n    @for (row of yGrid(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- x-axis labels -->\n    @for (col of xGrid(); track col.value) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"col.x\"\n        [attr.y]=\"height() - 12\"\n      >\n        {{ col.label }}\n      </text>\n    }\n\n    <!-- Axis titles -->\n    @if (xLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--x\"\n        [attr.x]=\"plot().x + plot().w / 2\"\n        [attr.y]=\"height() - 1\"\n      >\n        {{ xLabel() }}\n      </text>\n    }\n    @if (yLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--y\"\n        [attr.transform]=\"'rotate(-90 10 ' + (plot().y + plot().h / 2) + ')'\"\n        [attr.x]=\"10\"\n        [attr.y]=\"plot().y + plot().h / 2\"\n      >\n        {{ yLabel() }}\n      </text>\n    }\n\n    <!-- Points -->\n    @for (p of points(); track $index; let i = $index) {\n      <circle\n        class=\"mk-chart__point\"\n        [class.mk-chart__point--active]=\"hoverKey() === keyOf(i)\"\n        [attr.cx]=\"p.cx\"\n        [attr.cy]=\"p.cy\"\n        [attr.r]=\"p.r\"\n        [style.fill]=\"p.color\"\n        (pointerenter)=\"setHover(keyOf(i))\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(keyOf(i), $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        {{ t.title }}\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ xLabel() || 'x' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.x }}</span>\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ yLabel() || 'y' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.y }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartSeries }}</th>\n      <th scope=\"col\">{{ xLabel() || 'x' }}</th>\n      <th scope=\"col\">{{ yLabel() || 'y' }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (s of series(); track s.name) {\n      @for (p of s.points; track $index) {\n        <tr>\n          <th scope=\"row\">{{ s.name }}</th>\n          <td>{{ p.x }}</td>\n          <td>{{ p.y }}</td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScatterChart, decorators: [{
             type: Component,
@@ -2153,21 +2408,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-scatter-chart',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Horizontal gridlines + y-axis labels -->\n    @for (row of yGrid(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- x-axis labels -->\n    @for (col of xGrid(); track col.value) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"col.x\"\n        [attr.y]=\"height() - 12\"\n      >\n        {{ col.label }}\n      </text>\n    }\n\n    <!-- Axis titles -->\n    @if (xLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--x\"\n        [attr.x]=\"plot().x + plot().w / 2\"\n        [attr.y]=\"height() - 1\"\n      >\n        {{ xLabel() }}\n      </text>\n    }\n    @if (yLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--y\"\n        [attr.transform]=\"'rotate(-90 10 ' + (plot().y + plot().h / 2) + ')'\"\n        [attr.x]=\"10\"\n        [attr.y]=\"plot().y + plot().h / 2\"\n      >\n        {{ yLabel() }}\n      </text>\n    }\n\n    <!-- Points -->\n    @for (p of points(); track $index; let i = $index) {\n      <circle\n        class=\"mk-chart__point\"\n        [class.mk-chart__point--active]=\"hoverKey() === keyOf(i)\"\n        [attr.cx]=\"p.cx\"\n        [attr.cy]=\"p.cy\"\n        [attr.r]=\"p.r\"\n        [style.fill]=\"p.color\"\n        (pointerenter)=\"setHover(keyOf(i))\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(keyOf(i), $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        {{ t.title }}\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ xLabel() || 'x' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.x }}</span>\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ yLabel() || 'y' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.y }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartSeries }}</th>\n      <th scope=\"col\">{{ xLabel() || 'x' }}</th>\n      <th scope=\"col\">{{ yLabel() || 'y' }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (s of series(); track s.name) {\n      @for (p of s.points; track $index) {\n        <tr>\n          <th scope=\"row\">{{ s.name }}</th>\n          <td>{{ p.x }}</td>\n          <td>{{ p.y }}</td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"] }]
+                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Horizontal gridlines + y-axis labels -->\n    @for (row of yGrid(); track row.value) {\n      @if (showGrid()) {\n        <line\n          class=\"mk-chart__grid\"\n          [attr.x1]=\"row.x1\"\n          [attr.x2]=\"row.x2\"\n          [attr.y1]=\"row.y\"\n          [attr.y2]=\"row.y\"\n        />\n      }\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--y\"\n        [attr.x]=\"plot().x - 8\"\n        [attr.y]=\"row.y\"\n      >\n        {{ row.label }}\n      </text>\n    }\n\n    <!-- x-axis labels -->\n    @for (col of xGrid(); track col.value) {\n      <text\n        class=\"mk-chart__axis-label mk-chart__axis-label--x\"\n        [attr.x]=\"col.x\"\n        [attr.y]=\"height() - 12\"\n      >\n        {{ col.label }}\n      </text>\n    }\n\n    <!-- Axis titles -->\n    @if (xLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--x\"\n        [attr.x]=\"plot().x + plot().w / 2\"\n        [attr.y]=\"height() - 1\"\n      >\n        {{ xLabel() }}\n      </text>\n    }\n    @if (yLabel()) {\n      <text\n        class=\"mk-chart__axis-title mk-chart__axis-title--y\"\n        [attr.transform]=\"'rotate(-90 10 ' + (plot().y + plot().h / 2) + ')'\"\n        [attr.x]=\"10\"\n        [attr.y]=\"plot().y + plot().h / 2\"\n      >\n        {{ yLabel() }}\n      </text>\n    }\n\n    <!-- Points -->\n    @for (p of points(); track $index; let i = $index) {\n      <circle\n        class=\"mk-chart__point\"\n        [class.mk-chart__point--active]=\"hoverKey() === keyOf(i)\"\n        [attr.cx]=\"p.cx\"\n        [attr.cy]=\"p.cy\"\n        [attr.r]=\"p.r\"\n        [style.fill]=\"p.color\"\n        (pointerenter)=\"setHover(keyOf(i))\"\n        (pointerleave)=\"setHover(null)\"\n        (pointerdown)=\"pinHover(keyOf(i), $event)\"\n      />\n    }\n  </svg>\n\n  @if (tooltip(); as t) {\n    <div class=\"mk-chart__tooltip\" [style.left.%]=\"t.left\" [style.top.%]=\"t.top\">\n      <span class=\"mk-chart__tooltip-title\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"t.color\"></span>\n        {{ t.title }}\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ xLabel() || 'x' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.x }}</span>\n      </span>\n      <span class=\"mk-chart__tooltip-row\">\n        <span class=\"mk-chart__tooltip-name\">{{ yLabel() || 'y' }}</span>\n        <span class=\"mk-chart__tooltip-value\">{{ t.y }}</span>\n      </span>\n    </div>\n  }\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartSeries }}</th>\n      <th scope=\"col\">{{ xLabel() || 'x' }}</th>\n      <th scope=\"col\">{{ yLabel() || 'y' }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (s of series(); track s.name) {\n      @for (p of s.points; track $index) {\n        <tr>\n          <th scope=\"row\">{{ s.name }}</th>\n          <td>{{ p.x }}</td>\n          <td>{{ p.y }}</td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], bubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubble", required: false }] }], maxRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRadius", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/** WCAG AA minimum contrast for normal text — what cell values are held to. */
+const MK_HEATMAP_MIN_CONTRAST = 4.5;
+/** WCAG 2.x relative luminance of an sRGB colour. */
+function mkRelativeLuminance([r, g, b]) {
+    const lin = (c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+/** WCAG 2.x contrast ratio (1–21) between two colours. */
+function mkContrastRatio(a, b) {
+    const la = mkRelativeLuminance(a);
+    const lb = mkRelativeLuminance(b);
+    const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** What `color-mix(in srgb, a t%, b)` yields: a linear blend in gamma-encoded sRGB. */
+function mkMixRgb(a, b, t) {
+    const mix = (x, y) => Math.round(x * t + y * (1 - t));
+    return [mix(a[0], b[0]), mix(a[1], b[1]), mix(a[2], b[2])];
+}
+/**
+ * Parse a CSS colour as the CSSOM serialises it — `rgb(r, g, b)` /
+ * `rgba(r, g, b, a)` — or a `#rgb` / `#rrggbb` literal. `null` for anything
+ * else (an unresolved `var()`, `color(...)`, …).
+ */
+function mkParseRgb(text) {
+    const s = (text ?? '').trim();
+    const fn = /^rgba?\(\s*(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)/i.exec(s);
+    if (fn)
+        return [Number(fn[1]), Number(fn[2]), Number(fn[3])];
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+    if (!hex)
+        return null;
+    const h = hex[1].length === 3 ? [...hex[1]].map((c) => c + c).join('') : hex[1];
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+/** Best of the two text tokens against the cell painted at intensity `t`. */
+function pickText(t, palette) {
+    const bg = mkMixRgb(palette.accent, palette.surface, t);
+    const onText = mkContrastRatio(palette.text, bg);
+    const onInverse = mkContrastRatio(palette.textInverse, bg);
+    return onInverse > onText
+        ? { intensity: t, inverse: true, contrast: onInverse }
+        : { intensity: t, inverse: false, contrast: onText };
+}
+/**
+ * Choose the text token for a cell at intensity `t` (0–1) — light text on
+ * dark cells, dark text on light cells, decided by contrast against the
+ * actual blend rather than a fixed threshold.
+ *
+ * Every accent ramp has a crossover band where neither `--mk-text` nor
+ * `--mk-text-inverse` reaches 4.5:1 (the cell is mid-luminance). When values
+ * are printed in the cells, a cell in that band is painted at the nearest
+ * intensity just outside it, so its value stays readable; the shift is a few
+ * percent of the ramp and the cell keeps its order relative to its
+ * neighbours. Without a resolved palette (server rendering, tests) a plain
+ * threshold is used.
+ */
+function mkHeatmapCellColors(t, palette, showValues) {
+    const clamped = Math.max(0, Math.min(1, t));
+    if (!palette)
+        return { intensity: clamped, inverse: clamped >= 0.55, contrast: NaN };
+    const best = pickText(clamped, palette);
+    if (!showValues || best.contrast >= MK_HEATMAP_MIN_CONTRAST)
+        return best;
+    // In the crossover band: step outward (down and up alternately, 1 % at a
+    // time) to the closest intensity at which one of the tokens passes.
+    for (let step = 1; step <= 100; step++) {
+        const delta = step / 100;
+        for (const candidate of [clamped - delta, clamped + delta]) {
+            if (candidate < 0 || candidate > 1)
+                continue;
+            const pick = pickText(candidate, palette);
+            if (pick.contrast >= MK_HEATMAP_MIN_CONTRAST)
+                return pick;
+        }
+    }
+    return best;
+}
 /**
  * Heatmap — a matrix of cells shaded by value intensity, for correlation
  * grids, activity-by-time tables and the like. Rendered as a semantic
  * `<table>` (so it is inherently screen-reader friendly) with cell colours
  * mixed from `accent` over the surface via `color-mix`, so it tracks the theme.
  *
+ * Printed values (`showValues`) pick `--mk-text` or `--mk-text-inverse` per
+ * cell by contrast against that cell's actual colour, in both themes — see
+ * {@link mkHeatmapCellColors}.
+ *
  * ```html
  * <mk-heatmap
  *   [xLabels]="hours" [yLabels]="days" [data]="matrix()" showValues />
  * ```
  */
 class MkHeatmap {
+    doc = inject(DOCUMENT$1);
+    host = inject(ElementRef).nativeElement;
     /** Column labels (x axis). */
     xLabels = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []));
@@ -2196,6 +2538,25 @@ class MkHeatmap {
     /** Accessible summary; generated from the data when omitted. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * The accent and the text/surface tokens resolved through the CSSOM, so
+     * each cell can pick a text colour that actually contrasts with its blend.
+     * `null` until resolved (server, jsdom) — the cells then fall back to a
+     * threshold.
+     */
+    palette = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    /** Bumped when the document theme changes so the palette is re-resolved. */
+    themeTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeTick" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            this.accent();
+            this.themeTick();
+            untracked(() => this.palette.set(this.resolvePalette()));
+        });
+        this.watchTheme();
+    }
     domain = computed(() => {
         const flat = this.data()
             .flat()
@@ -2211,26 +2572,32 @@ class MkHeatmap {
         const span = hi - lo || 1;
         return Math.max(0, Math.min(1, (value - lo) / span));
     }
+    /** The `color-mix()` expression painting a cell at intensity `t`. */
+    cellBackground(t) {
+        return `color-mix(in srgb, ${this.accent()} ${Math.round(t * 100)}%, var(--mk-surface-2))`;
+    }
     rows = computed(() => {
         const xs = this.xLabels();
         const ys = this.yLabels();
         const data = this.data();
         const fmt = this.format();
+        const palette = this.palette();
+        const showValues = this.showValues();
         return ys.map((yLabel, r) => ({
             label: yLabel,
             cells: xs.map((xLabel, c) => {
                 const value = data[r]?.[c] ?? null;
                 if (value == null) {
-                    return { value: null, display: '', xLabel, bg: 'transparent', strong: false };
+                    return { value: null, display: '', xLabel, bg: 'transparent', inverse: false };
                 }
-                const t = this.ratio(value);
+                const colors = mkHeatmapCellColors(this.ratio(value), palette, showValues);
                 return {
                     value,
                     display: fmt(value),
                     xLabel,
                     // Mix the accent over the surface; more intense = more accent.
-                    bg: `color-mix(in srgb, ${this.accent()} ${Math.round(t * 100)}%, var(--mk-surface-2))`,
-                    strong: t >= 0.55,
+                    bg: this.cellBackground(colors.intensity),
+                    inverse: colors.inverse,
                 };
             }),
         }));
@@ -2243,7 +2610,7 @@ class MkHeatmap {
         return {
             min: fmt(lo),
             max: fmt(hi),
-            swatches: [0, 0.25, 0.5, 0.75, 1].map((t) => `color-mix(in srgb, ${this.accent()} ${t * 100}%, var(--mk-surface-2))`),
+            swatches: [0, 0.25, 0.5, 0.75, 1].map((t) => this.cellBackground(t)),
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scaleStops" }] : /* istanbul ignore next */ []));
@@ -2255,8 +2622,62 @@ class MkHeatmap {
         return `Heatmap, ${rows} rows by ${cols} columns`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolve the accent and the tokens to sRGB through a hidden probe: the
+     * probe's computed `color` is what the browser would paint, `var()`s and
+     * `color-mix()` included. `null` when the environment cannot resolve them.
+     */
+    resolvePalette() {
+        const win = this.doc.defaultView;
+        if (!win?.getComputedStyle)
+            return null;
+        const probe = this.doc.createElement('span');
+        probe.setAttribute('aria-hidden', 'true');
+        probe.style.position = 'absolute';
+        probe.style.visibility = 'hidden';
+        this.host.appendChild(probe);
+        try {
+            const read = (expr) => {
+                probe.style.color = '';
+                probe.style.color = expr;
+                return mkParseRgb(win.getComputedStyle(probe).color);
+            };
+            const accent = read(this.accent());
+            const surface = read('var(--mk-surface-2)');
+            const text = read('var(--mk-text)');
+            const textInverse = read('var(--mk-text-inverse)');
+            return accent && surface && text && textInverse
+                ? { accent, surface, text, textInverse }
+                : null;
+        }
+        finally {
+            probe.remove();
+        }
+    }
+    /**
+     * Re-resolve when the theme flips: `data-theme` / class changes on the root
+     * element (MkThemeService and most hand-rolled toggles) and the OS scheme.
+     */
+    watchTheme() {
+        const win = this.doc.defaultView;
+        const root = this.doc.documentElement;
+        if (!win || !root)
+            return;
+        const bump = () => this.themeTick.update((n) => n + 1);
+        const destroyRef = inject(DestroyRef);
+        if (typeof win.MutationObserver === 'function') {
+            const observer = new win.MutationObserver(bump);
+            observer.observe(root, { attributes: true, attributeFilter: ['data-theme', 'class', 'style'] });
+            destroyRef.onDestroy(() => observer.disconnect());
+        }
+        const mql = win.matchMedia?.('(prefers-color-scheme: dark)');
+        if (mql?.addEventListener) {
+            mql.addEventListener('change', bump);
+            destroyRef.onDestroy(() => mql.removeEventListener('change', bump));
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHeatmap, isStandalone: true, selector: "mk-heatmap", inputs: { xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, yLabels: { classPropertyName: "yLabels", publicName: "yLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showScale: { classPropertyName: "showScale", publicName: "showScale", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-heatmap" }, ngImport: i0, template: "<!-- Focusable so keyboard users can scroll the overflowing grid (WCAG 2.1.1). -->\n<div\n  class=\"mk-chart__frame mk-heatmap__scroll\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedLabel()\"\n>\n  <table class=\"mk-heatmap__grid\">\n    <caption class=\"mk-visually-hidden\">{{ resolvedLabel() }}</caption>\n    <thead>\n      <tr>\n        <td class=\"mk-heatmap__corner\"></td>\n        @for (x of xLabels(); track $index) {\n          <th scope=\"col\" class=\"mk-heatmap__col-head\">{{ x }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of rows(); track row.label) {\n        <tr>\n          <th scope=\"row\" class=\"mk-heatmap__row-head\">{{ row.label }}</th>\n          @for (cell of row.cells; track $index) {\n            <td\n              class=\"mk-heatmap__cell\"\n              [class.mk-heatmap__cell--strong]=\"cell.strong\"\n              [class.mk-heatmap__cell--empty]=\"cell.value === null\"\n              [style.background]=\"cell.bg\"\n              [attr.title]=\"\n                cell.value === null\n                  ? null\n                  : row.label + ' \u00B7 ' + cell.xLabel + ': ' + cell.display\n              \"\n            >\n              @if (cell.value !== null) {\n                @if (showValues()) {\n                  <span class=\"mk-heatmap__value\">{{ cell.display }}</span>\n                } @else {\n                  <!-- Colour must not be the only signal: expose the value to AT. -->\n                  <span class=\"mk-visually-hidden\">{{ cell.display }}</span>\n                }\n              }\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showScale()) {\n  <div class=\"mk-heatmap__legend\" aria-hidden=\"true\">\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().min }}</span>\n    <span class=\"mk-heatmap__legend-ramp\">\n      @for (sw of scaleStops().swatches; track $index) {\n        <span class=\"mk-heatmap__legend-swatch\" [style.background]=\"sw\"></span>\n      }\n    </span>\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().max }}</span>\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-heatmap__scroll{width:100%;overflow-x:auto}.mk-heatmap__scroll:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-heatmap__grid{border-collapse:separate;border-spacing:3px;font-size:var(--mk-font-size-sm);color:var(--mk-text)}.mk-heatmap__corner{border:0}.mk-heatmap__col-head,.mk-heatmap__row-head{padding:var(--mk-space-1) var(--mk-space-2);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted);white-space:nowrap}.mk-heatmap__col-head{text-align:center;vertical-align:bottom}.mk-heatmap__row-head{text-align:end}.mk-heatmap__cell{width:2.25rem;height:2.25rem;padding:0;text-align:center;vertical-align:middle;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);transition:outline-color var(--mk-duration-fast) var(--mk-ease-standard);outline:2px solid transparent;outline-offset:-2px}.mk-heatmap__cell:hover{outline-color:var(--mk-border-strong)}.mk-heatmap__cell--strong{color:var(--mk-primary-contrast)}.mk-heatmap__cell--empty{outline:none}.mk-heatmap__cell--empty:hover{outline-color:transparent}.mk-heatmap__value{font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-heatmap__legend{display:flex;align-items:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-heatmap__legend-ramp{display:inline-flex;gap:2px}.mk-heatmap__legend-swatch{width:1.1rem;height:.75rem;border-radius:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHeatmap, isStandalone: true, selector: "mk-heatmap", inputs: { xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, yLabels: { classPropertyName: "yLabels", publicName: "yLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showScale: { classPropertyName: "showScale", publicName: "showScale", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-heatmap" }, ngImport: i0, template: "<!-- Focusable so keyboard users can scroll the overflowing grid (WCAG 2.1.1). -->\n<div\n  class=\"mk-chart__frame mk-heatmap__scroll\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedLabel()\"\n>\n  <table class=\"mk-heatmap__grid\">\n    <caption class=\"mk-visually-hidden\">{{ resolvedLabel() }}</caption>\n    <thead>\n      <tr>\n        <td class=\"mk-heatmap__corner\"></td>\n        @for (x of xLabels(); track $index) {\n          <th scope=\"col\" class=\"mk-heatmap__col-head\">{{ x }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of rows(); track row.label) {\n        <tr>\n          <th scope=\"row\" class=\"mk-heatmap__row-head\">{{ row.label }}</th>\n          @for (cell of row.cells; track $index) {\n            <td\n              class=\"mk-heatmap__cell\"\n              [class.mk-heatmap__cell--inverse]=\"cell.inverse\"\n              [class.mk-heatmap__cell--empty]=\"cell.value === null\"\n              [style.background]=\"cell.bg\"\n              [attr.title]=\"\n                cell.value === null\n                  ? null\n                  : row.label + ' \u00B7 ' + cell.xLabel + ': ' + cell.display\n              \"\n            >\n              @if (cell.value !== null) {\n                @if (showValues()) {\n                  <span class=\"mk-heatmap__value\">{{ cell.display }}</span>\n                } @else {\n                  <!-- Colour must not be the only signal: expose the value to AT. -->\n                  <span class=\"mk-visually-hidden\">{{ cell.display }}</span>\n                }\n              }\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showScale()) {\n  <div class=\"mk-heatmap__legend\" aria-hidden=\"true\">\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().min }}</span>\n    <span class=\"mk-heatmap__legend-ramp\">\n      @for (sw of scaleStops().swatches; track $index) {\n        <span class=\"mk-heatmap__legend-swatch\" [style.background]=\"sw\"></span>\n      }\n    </span>\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().max }}</span>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-heatmap__scroll{width:100%;overflow-x:auto}.mk-heatmap__scroll:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-heatmap__grid{border-collapse:separate;border-spacing:3px;font-size:var(--mk-font-size-sm);color:var(--mk-text)}.mk-heatmap__corner{border:0}.mk-heatmap__col-head,.mk-heatmap__row-head{padding:var(--mk-space-1) var(--mk-space-2);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted);white-space:nowrap}.mk-heatmap__col-head{text-align:center;vertical-align:bottom}.mk-heatmap__row-head{text-align:end}.mk-heatmap__cell{width:2.25rem;height:2.25rem;padding:0;text-align:center;vertical-align:middle;border-radius:var(--mk-radius-sm);color:var(--mk-text);transition:outline-color var(--mk-duration-fast) var(--mk-ease-standard);outline:2px solid transparent;outline-offset:-2px}.mk-heatmap__cell:hover{outline-color:var(--mk-border-strong)}.mk-heatmap__cell--inverse{color:var(--mk-text-inverse)}.mk-heatmap__cell--empty{outline:none}.mk-heatmap__cell--empty:hover{outline-color:transparent}.mk-heatmap__value{font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-heatmap__legend{display:flex;align-items:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-heatmap__legend-ramp{display:inline-flex;gap:2px}.mk-heatmap__legend-swatch{width:1.1rem;height:.75rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--mk-border-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHeatmap, decorators: [{
             type: Component,
@@ -2264,8 +2685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-heatmap',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<!-- Focusable so keyboard users can scroll the overflowing grid (WCAG 2.1.1). -->\n<div\n  class=\"mk-chart__frame mk-heatmap__scroll\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedLabel()\"\n>\n  <table class=\"mk-heatmap__grid\">\n    <caption class=\"mk-visually-hidden\">{{ resolvedLabel() }}</caption>\n    <thead>\n      <tr>\n        <td class=\"mk-heatmap__corner\"></td>\n        @for (x of xLabels(); track $index) {\n          <th scope=\"col\" class=\"mk-heatmap__col-head\">{{ x }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of rows(); track row.label) {\n        <tr>\n          <th scope=\"row\" class=\"mk-heatmap__row-head\">{{ row.label }}</th>\n          @for (cell of row.cells; track $index) {\n            <td\n              class=\"mk-heatmap__cell\"\n              [class.mk-heatmap__cell--strong]=\"cell.strong\"\n              [class.mk-heatmap__cell--empty]=\"cell.value === null\"\n              [style.background]=\"cell.bg\"\n              [attr.title]=\"\n                cell.value === null\n                  ? null\n                  : row.label + ' \u00B7 ' + cell.xLabel + ': ' + cell.display\n              \"\n            >\n              @if (cell.value !== null) {\n                @if (showValues()) {\n                  <span class=\"mk-heatmap__value\">{{ cell.display }}</span>\n                } @else {\n                  <!-- Colour must not be the only signal: expose the value to AT. -->\n                  <span class=\"mk-visually-hidden\">{{ cell.display }}</span>\n                }\n              }\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showScale()) {\n  <div class=\"mk-heatmap__legend\" aria-hidden=\"true\">\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().min }}</span>\n    <span class=\"mk-heatmap__legend-ramp\">\n      @for (sw of scaleStops().swatches; track $index) {\n        <span class=\"mk-heatmap__legend-swatch\" [style.background]=\"sw\"></span>\n      }\n    </span>\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().max }}</span>\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-heatmap__scroll{width:100%;overflow-x:auto}.mk-heatmap__scroll:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-heatmap__grid{border-collapse:separate;border-spacing:3px;font-size:var(--mk-font-size-sm);color:var(--mk-text)}.mk-heatmap__corner{border:0}.mk-heatmap__col-head,.mk-heatmap__row-head{padding:var(--mk-space-1) var(--mk-space-2);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted);white-space:nowrap}.mk-heatmap__col-head{text-align:center;vertical-align:bottom}.mk-heatmap__row-head{text-align:end}.mk-heatmap__cell{width:2.25rem;height:2.25rem;padding:0;text-align:center;vertical-align:middle;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);transition:outline-color var(--mk-duration-fast) var(--mk-ease-standard);outline:2px solid transparent;outline-offset:-2px}.mk-heatmap__cell:hover{outline-color:var(--mk-border-strong)}.mk-heatmap__cell--strong{color:var(--mk-primary-contrast)}.mk-heatmap__cell--empty{outline:none}.mk-heatmap__cell--empty:hover{outline-color:transparent}.mk-heatmap__value{font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-heatmap__legend{display:flex;align-items:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-heatmap__legend-ramp{display:inline-flex;gap:2px}.mk-heatmap__legend-swatch{width:1.1rem;height:.75rem;border-radius:2px}\n"] }]
-        }], propDecorators: { xLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabels", required: false }] }], yLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabels", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScale", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+                    }, template: "<!-- Focusable so keyboard users can scroll the overflowing grid (WCAG 2.1.1). -->\n<div\n  class=\"mk-chart__frame mk-heatmap__scroll\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedLabel()\"\n>\n  <table class=\"mk-heatmap__grid\">\n    <caption class=\"mk-visually-hidden\">{{ resolvedLabel() }}</caption>\n    <thead>\n      <tr>\n        <td class=\"mk-heatmap__corner\"></td>\n        @for (x of xLabels(); track $index) {\n          <th scope=\"col\" class=\"mk-heatmap__col-head\">{{ x }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of rows(); track row.label) {\n        <tr>\n          <th scope=\"row\" class=\"mk-heatmap__row-head\">{{ row.label }}</th>\n          @for (cell of row.cells; track $index) {\n            <td\n              class=\"mk-heatmap__cell\"\n              [class.mk-heatmap__cell--inverse]=\"cell.inverse\"\n              [class.mk-heatmap__cell--empty]=\"cell.value === null\"\n              [style.background]=\"cell.bg\"\n              [attr.title]=\"\n                cell.value === null\n                  ? null\n                  : row.label + ' \u00B7 ' + cell.xLabel + ': ' + cell.display\n              \"\n            >\n              @if (cell.value !== null) {\n                @if (showValues()) {\n                  <span class=\"mk-heatmap__value\">{{ cell.display }}</span>\n                } @else {\n                  <!-- Colour must not be the only signal: expose the value to AT. -->\n                  <span class=\"mk-visually-hidden\">{{ cell.display }}</span>\n                }\n              }\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showScale()) {\n  <div class=\"mk-heatmap__legend\" aria-hidden=\"true\">\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().min }}</span>\n    <span class=\"mk-heatmap__legend-ramp\">\n      @for (sw of scaleStops().swatches; track $index) {\n        <span class=\"mk-heatmap__legend-swatch\" [style.background]=\"sw\"></span>\n      }\n    </span>\n    <span class=\"mk-heatmap__legend-label\">{{ scaleStops().max }}</span>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-heatmap__scroll{width:100%;overflow-x:auto}.mk-heatmap__scroll:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-heatmap__grid{border-collapse:separate;border-spacing:3px;font-size:var(--mk-font-size-sm);color:var(--mk-text)}.mk-heatmap__corner{border:0}.mk-heatmap__col-head,.mk-heatmap__row-head{padding:var(--mk-space-1) var(--mk-space-2);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted);white-space:nowrap}.mk-heatmap__col-head{text-align:center;vertical-align:bottom}.mk-heatmap__row-head{text-align:end}.mk-heatmap__cell{width:2.25rem;height:2.25rem;padding:0;text-align:center;vertical-align:middle;border-radius:var(--mk-radius-sm);color:var(--mk-text);transition:outline-color var(--mk-duration-fast) var(--mk-ease-standard);outline:2px solid transparent;outline-offset:-2px}.mk-heatmap__cell:hover{outline-color:var(--mk-border-strong)}.mk-heatmap__cell--inverse{color:var(--mk-text-inverse)}.mk-heatmap__cell--empty{outline:none}.mk-heatmap__cell--empty:hover{outline-color:transparent}.mk-heatmap__value{font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-heatmap__legend{display:flex;align-items:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-heatmap__legend-ramp{display:inline-flex;gap:2px}.mk-heatmap__legend-swatch{width:1.1rem;height:.75rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--mk-border-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { xLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabels", required: false }] }], yLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabels", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScale", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /** Local midnight for `d` (drops the time-of-day). */
 function stripTime(d) {
@@ -2601,7 +3022,7 @@ class MkRadarChart {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkRadarChart, isStandalone: true, selector: "mk-radar-chart", inputs: { axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", 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 }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-radar-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Grid rings -->\n    @for (ring of rings(); track ring.key) {\n      <polygon class=\"mk-chart__grid mk-radar__ring\" [attr.points]=\"ring.points\" />\n    }\n\n    <!-- Axis spokes + labels -->\n    @for (axis of axisSpokes(); track axis.label) {\n      <line\n        class=\"mk-chart__grid\"\n        [attr.x1]=\"width() / 2\"\n        [attr.y1]=\"height() / 2\"\n        [attr.x2]=\"axis.x\"\n        [attr.y2]=\"axis.y\"\n      />\n      <text\n        class=\"mk-chart__axis-label mk-radar__axis-label\"\n        [attr.x]=\"axis.lx\"\n        [attr.y]=\"axis.ly\"\n        [attr.text-anchor]=\"axis.anchor\"\n      >\n        {{ axis.label }}\n      </text>\n    }\n\n    <!-- Series polygons -->\n    @for (r of rendered(); track r.name) {\n      <polygon\n        class=\"mk-radar__area\"\n        [attr.points]=\"r.polygon\"\n        [style.fill]=\"r.color\"\n        [style.stroke]=\"r.color\"\n      />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n  </svg>\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartAxis }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (axis of axes(); track axis; let a = $index) {\n      <tr>\n        <th scope=\"row\">{{ axis }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[a] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkRadarChart, isStandalone: true, selector: "mk-radar-chart", inputs: { axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", 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 }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "resolvedLabel()" }, classAttribute: "mk-chart mk-radar-chart" }, ngImport: i0, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Grid rings -->\n    @for (ring of rings(); track ring.key) {\n      <polygon class=\"mk-chart__grid mk-radar__ring\" [attr.points]=\"ring.points\" />\n    }\n\n    <!-- Axis spokes + labels -->\n    @for (axis of axisSpokes(); track axis.label) {\n      <line\n        class=\"mk-chart__grid\"\n        [attr.x1]=\"width() / 2\"\n        [attr.y1]=\"height() / 2\"\n        [attr.x2]=\"axis.x\"\n        [attr.y2]=\"axis.y\"\n      />\n      <text\n        class=\"mk-chart__axis-label mk-radar__axis-label\"\n        [attr.x]=\"axis.lx\"\n        [attr.y]=\"axis.ly\"\n        [attr.text-anchor]=\"axis.anchor\"\n      >\n        {{ axis.label }}\n      </text>\n    }\n\n    <!-- Series polygons -->\n    @for (r of rendered(); track r.name) {\n      <polygon\n        class=\"mk-radar__area\"\n        [attr.points]=\"r.polygon\"\n        [style.fill]=\"r.color\"\n        [style.stroke]=\"r.color\"\n      />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n  </svg>\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartAxis }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (axis of axes(); track axis; let a = $index) {\n      <tr>\n        <th scope=\"row\">{{ axis }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[a] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRadarChart, decorators: [{
             type: Component,
@@ -2609,7 +3030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'mk-chart mk-radar-chart',
                         role: 'group',
                         '[attr.aria-label]': 'resolvedLabel()',
-                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Grid rings -->\n    @for (ring of rings(); track ring.key) {\n      <polygon class=\"mk-chart__grid mk-radar__ring\" [attr.points]=\"ring.points\" />\n    }\n\n    <!-- Axis spokes + labels -->\n    @for (axis of axisSpokes(); track axis.label) {\n      <line\n        class=\"mk-chart__grid\"\n        [attr.x1]=\"width() / 2\"\n        [attr.y1]=\"height() / 2\"\n        [attr.x2]=\"axis.x\"\n        [attr.y2]=\"axis.y\"\n      />\n      <text\n        class=\"mk-chart__axis-label mk-radar__axis-label\"\n        [attr.x]=\"axis.lx\"\n        [attr.y]=\"axis.ly\"\n        [attr.text-anchor]=\"axis.anchor\"\n      >\n        {{ axis.label }}\n      </text>\n    }\n\n    <!-- Series polygons -->\n    @for (r of rendered(); track r.name) {\n      <polygon\n        class=\"mk-radar__area\"\n        [attr.points]=\"r.polygon\"\n        [style.fill]=\"r.color\"\n        [style.stroke]=\"r.color\"\n      />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n  </svg>\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartAxis }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (axis of axes(); track axis; let a = $index) {\n      <tr>\n        <th scope=\"row\">{{ axis }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[a] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}\n"] }]
+                    }, template: "<div class=\"mk-chart__frame\">\n  <svg\n    class=\"mk-chart__svg\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <!-- Grid rings -->\n    @for (ring of rings(); track ring.key) {\n      <polygon class=\"mk-chart__grid mk-radar__ring\" [attr.points]=\"ring.points\" />\n    }\n\n    <!-- Axis spokes + labels -->\n    @for (axis of axisSpokes(); track axis.label) {\n      <line\n        class=\"mk-chart__grid\"\n        [attr.x1]=\"width() / 2\"\n        [attr.y1]=\"height() / 2\"\n        [attr.x2]=\"axis.x\"\n        [attr.y2]=\"axis.y\"\n      />\n      <text\n        class=\"mk-chart__axis-label mk-radar__axis-label\"\n        [attr.x]=\"axis.lx\"\n        [attr.y]=\"axis.ly\"\n        [attr.text-anchor]=\"axis.anchor\"\n      >\n        {{ axis.label }}\n      </text>\n    }\n\n    <!-- Series polygons -->\n    @for (r of rendered(); track r.name) {\n      <polygon\n        class=\"mk-radar__area\"\n        [attr.points]=\"r.polygon\"\n        [style.fill]=\"r.color\"\n        [style.stroke]=\"r.color\"\n      />\n      @if (showDots()) {\n        @for (p of r.points; track $index) {\n          <circle\n            class=\"mk-chart__dot\"\n            [attr.cx]=\"p.x\"\n            [attr.cy]=\"p.y\"\n            r=\"3\"\n            [style.fill]=\"r.color\"\n          />\n        }\n      }\n    }\n  </svg>\n</div>\n\n@if (legendVisible()) {\n  <ul class=\"mk-chart__legend\">\n    @for (item of legend(); track item.name) {\n      <li class=\"mk-chart__legend-item\">\n        <span class=\"mk-chart__swatch\" [style.background]=\"item.color\"></span>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n}\n\n<table class=\"mk-chart__sr-table\">\n  <caption>{{ resolvedLabel() }}</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ i18n.chartAxis }}</th>\n      @for (s of series(); track s.name) {\n        <th scope=\"col\">{{ s.name }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (axis of axes(); track axis; let a = $index) {\n      <tr>\n        <th scope=\"row\">{{ axis }}</th>\n        @for (s of series(); track s.name) {\n          <td>{{ s.data[a] }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-chart__frame{position:relative}.mk-chart__svg{display:block;width:100%;height:auto;overflow:visible}.mk-chart__grid{stroke:var(--mk-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}.mk-chart__axis-label{fill:var(--mk-chart-axis);font-size:11px}.mk-chart__axis-label--y{text-anchor:end;dominant-baseline:middle}.mk-chart__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.mk-chart__axis-label--tilted{text-anchor:end;dominant-baseline:middle}.mk-chart__bar{transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),filter var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__bar:hover{filter:brightness(1.08)}.mk-chart__bar--dim{opacity:.4}.mk-chart__area{stroke:none;opacity:.14}.mk-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-chart__dot{stroke:var(--mk-surface);stroke-width:1.5;vector-effect:non-scaling-stroke}.mk-chart__crosshair{stroke:var(--mk-chart-axis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.6}.mk-chart__point{fill-opacity:.72;stroke:var(--mk-surface);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__point:hover,.mk-chart__point--active{fill-opacity:1}.mk-radar__ring{fill:none}.mk-radar__area{fill-opacity:.16;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mk-radar__axis-label{dominant-baseline:middle}.mk-chart__axis-title{fill:var(--mk-chart-axis);font-size:11px;font-weight:var(--mk-font-weight-medium)}.mk-chart__axis-title--x,.mk-chart__axis-title--y{text-anchor:middle}.mk-chart__slice{stroke:var(--mk-surface);stroke-width:2;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-chart__slice--dim{opacity:.45}.mk-chart__tooltip{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-chart__tooltip-title{font-weight:var(--mk-font-weight-semibold)}.mk-chart__tooltip-row{display:flex;align-items:center;gap:var(--mk-space-2)}.mk-chart__tooltip-name{color:var(--mk-text-muted)}.mk-chart__tooltip-value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--mk-font-weight-medium)}.mk-chart__swatch{flex:none;width:.75rem;height:.75rem;border-radius:var(--mk-radius-xs)}.mk-chart__legend{display:flex;flex-wrap:wrap;gap:var(--mk-space-2) var(--mk-space-4);margin:var(--mk-space-3) 0 0;padding:0;padding-inline-start:var(--mk-space-2);list-style:none}.mk-chart__legend-item{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-donut__frame{margin:0 auto}.mk-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}.mk-donut__center-label{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:1;color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-donut__center-sublabel{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle);text-transform:uppercase;letter-spacing:.04em}.mk-donut__legend{flex-direction:column;gap:var(--mk-space-2)}.mk-donut__legend .mk-chart__legend-item{width:100%}.mk-donut__legend-name{color:var(--mk-text)}.mk-donut__legend-value{margin-inline-start:auto;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-chart__bar,.mk-chart__slice{transition:none}}.mk-chart__slice--interactive,.mk-chart__bar--interactive,.mk-chart__band--interactive,.mk-chart__legend-item--interactive{cursor:pointer}.mk-chart__slice--interactive:focus-visible,.mk-chart__bar--interactive:focus-visible,.mk-chart__band--interactive:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}.mk-chart__legend-button{display:inline-flex;align-items:center;gap:inherit;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-chart__legend-button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { axes: [{ type: i0.Input, args: [{ isSignal: true, alias: "axes", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], levels: [{ type: i0.Input, args: [{ isSignal: true, alias: "levels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 const MARGIN = { top: 10, right: 12, bottom: 10, left: 12 };
@@ -6071,5 +6492,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_CHART_PALETTE_SIZE, MkAvatar, MkAvatarGroup, MkBadge, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkComputeDiff, mkDiffStats, mkEncodeQr, mkFormatCompact, mkLinePath, mkLinearScale, mkNiceTicks, mkParseAnsi, mkParseMarkdown, mkRenderMarkdown, mkSplitDuration, mkSquarify, mkStripAnsi };
+export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBadge, MkBadgeOverlay, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkComputeDiff, mkContrastRatio, mkDiffStats, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkParseAnsi, mkParseMarkdown, mkParseRgb, mkRelativeLuminance, mkRenderMarkdown, mkSplitDuration, mkSquarify, mkStripAnsi };
 //# sourceMappingURL=mk-kit-ui-data.mjs.map