@mk-kit/ui 0.39.0 → 0.41.0

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

@@ -376,7 +376,7 @@ class MkListItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkListItem, isStandalone: true, selector: "mk-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class.mk-list-item--interactive": "interactive()", "class.mk-list-item--selected": "selected()", "class.mk-list-item--disabled": "disabled()", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-selected": "interactive() ? selected() : null", "attr.aria-disabled": "disabled() ? 'true' : null" }, classAttribute: "mk-list-item" }, ngImport: i0, template: "<span class=\"mk-list-item__leading\"><ng-content select=\"[mkListLeading]\" /></span>\n<span class=\"mk-list-item__content\"><ng-content /></span>\n<span class=\"mk-list-item__trailing\"><ng-content select=\"[mkListTrailing]\" /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);min-height:2.75rem;border-top:var(--mk-border-width) solid var(--mk-list-item-border, transparent);color:var(--mk-text);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:first-child){border-top-color:transparent}.mk-list-item__leading,.mk-list-item__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--mk-text-muted)}.mk-list-item__leading:empty,.mk-list-item__trailing:empty{display:none}.mk-list-item__content{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-list-item__trailing{margin-inline-start:auto}:host(.mk-list-item--interactive){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-list-item--interactive:hover){background-color:var(--mk-neutral-subtle)}:host(.mk-list-item--interactive:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-list-item--selected){background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}:host(.mk-list-item--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkListItem, isStandalone: true, selector: "mk-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class.mk-list-item--interactive": "interactive()", "class.mk-list-item--selected": "selected()", "class.mk-list-item--disabled": "disabled()", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-current": "interactive() && selected() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null" }, classAttribute: "mk-list-item" }, ngImport: i0, template: "<span class=\"mk-list-item__leading\"><ng-content select=\"[mkListLeading]\" /></span>\n<span class=\"mk-list-item__content\"><ng-content /></span>\n<span class=\"mk-list-item__trailing\"><ng-content select=\"[mkListTrailing]\" /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);min-height:2.75rem;border-top:var(--mk-border-width) solid var(--mk-list-item-border, transparent);color:var(--mk-text);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:first-child){border-top-color:transparent}.mk-list-item__leading,.mk-list-item__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--mk-text-muted)}.mk-list-item__leading:empty,.mk-list-item__trailing:empty{display:none}.mk-list-item__content{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-list-item__trailing{margin-inline-start:auto}:host(.mk-list-item--interactive){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-list-item--interactive:hover){background-color:var(--mk-neutral-subtle)}:host(.mk-list-item--interactive:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-list-item--selected){background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}:host(.mk-list-item--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListItem, decorators: [{
             type: Component,
@@ -387,7 +387,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-list-item--selected]': 'selected()',
                         '[class.mk-list-item--disabled]': 'disabled()',
                         '[attr.tabindex]': 'interactive() && !disabled() ? 0 : null',
-                        '[attr.aria-selected]': 'interactive() ? selected() : null',
+                        // `aria-selected` is not permitted on `listitem`; `aria-current` is the
+                        // ARIA way to mark the current row of a plain list.
+                        '[attr.aria-current]': "interactive() && selected() ? 'true' : null",
                         '[attr.aria-disabled]': "disabled() ? 'true' : null",
                         '(click)': 'onClick()',
                         '(keydown)': 'onKeydown($event)',
@@ -1224,6 +1226,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
@@ -1469,6 +1475,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);
     }
@@ -1476,7 +1498,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,
@@ -1484,8 +1506,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. */
@@ -1551,6 +1573,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
@@ -1724,6 +1750,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);
     }
@@ -1731,7 +1775,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,
@@ -1739,8 +1783,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
@@ -1773,6 +1817,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
@@ -1853,6 +1905,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);
     }
@@ -1860,7 +1928,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,
@@ -1868,8 +1936,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
@@ -2143,7 +2211,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,
@@ -2151,7 +2219,7 @@ 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 }] }] } });
 
 /**
@@ -2599,7 +2667,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,
@@ -2607,7 +2675,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 };
@@ -3383,6 +3451,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "@if (isDone() && finishedText()) {\n  <span class=\"mk-countdown__done\">{{ finishedText() }}</span>\n} @else {\n  @if (showDays()) {\n    <span class=\"mk-countdown__segment\">\n      <span class=\"mk-countdown__value\">{{ format(parts().days) }}</span>\n      @if (showLabels()) {\n        <span class=\"mk-countdown__label\">{{ i18n.countdownDays }}</span>\n      }\n    </span>\n    <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  }\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().hours) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownHours }}</span>\n    }\n  </span>\n  <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().minutes) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownMinutes }}</span>\n    }\n  </span>\n  <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().seconds) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownSeconds }}</span>\n    }\n  </span>\n}\n\n<!-- Minute-granular so the polite region doesn't re-announce every second. -->\n<span class=\"mk-countdown__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveText() }}</span>\n", styles: [":host{display:inline-flex;align-items:flex-start;gap:var(--mk-space-2);color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-countdown__segment{display:inline-flex;flex-direction:column;align-items:center;gap:var(--mk-space-1)}.mk-countdown__value{font-size:var(--mk-font-size-2xl);font-variant-numeric:tabular-nums;line-height:1}.mk-countdown__label{color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);text-transform:uppercase;letter-spacing:.05em}.mk-countdown__sep{color:var(--mk-text-muted);font-size:var(--mk-font-size-2xl);line-height:1}.mk-countdown__done{font-size:var(--mk-font-size-lg)}.mk-countdown__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], showDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDays", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], pad: [{ type: i0.Input, args: [{ isSignal: true, alias: "pad", required: false }] }], finishedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishedText", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }] } });
 
+/**
+ * A single term/detail row of {@link MkDescriptionList}: `term` becomes the
+ * `<dt>`, the projected content the `<dd>`. The row itself renders nothing —
+ * the list reads its rows and writes `<dt>`/`<dd>` as direct children of the
+ * `<dl>`, which is what HTML and assistive tech require (a wrapper element
+ * between `<dl>` and `<dt>` fails axe `definition-list` / `dlitem`).
+ */
+class MkDescItem {
+    /** The term (label) shown in the `<dt>`. */
+    term = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    /** The row's detail content, rendered by the list inside its `<dd>`. @internal */
+    content = viewChild.required('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDescItem, isStandalone: true, selector: "mk-desc-item", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-desc-item" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-desc-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-template #content><ng-content /></ng-template>`, host: { class: 'mk-desc-item' }, styles: [":host{display:none}\n"] }]
+        }], propDecorators: { term: [{ type: i0.Input, args: [{ isSignal: true, alias: "term", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 /**
  * DescriptionList — a semantic `<dl>` of term/detail pairs for entity-detail and
  * metadata panels. Project {@link MkDescItem} rows; values may be rich content
@@ -3395,6 +3484,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  *   <mk-desc-item term="Owner">Ada Lovelace</mk-desc-item>
  * </mk-description-list>
  * ```
+ *
+ * Only `mk-desc-item` children are rendered; the `<dl>` always contains plain
+ * `<dt>`/`<dd>` pairs.
  */
 class MkDescriptionList {
     /** `grid` aligns terms in a column; `stacked` puts each term above its value. */
@@ -3402,43 +3494,37 @@ class MkDescriptionList {
     ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /** Draw a divider between rows. */
     divided = input(false, { ...(ngDevMode ? { debugName: "divided" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    items = contentChildren(MkDescItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDescriptionList, isStandalone: true, selector: "mk-description-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-description-list" }, ngImport: i0, template: `<dl
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDescriptionList, isStandalone: true, selector: "mk-description-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-description-list" }, queries: [{ propertyName: "items", predicate: MkDescItem, isSignal: true }], ngImport: i0, template: `<dl
     class="mk-description-list__dl"
     [attr.data-layout]="layout()"
     [class.mk-description-list__dl--divided]="divided()"
   >
-    <ng-content />
-  </dl>`, isInline: true, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @for (item of items(); track item) {
+      <dt class="mk-description-list__term">{{ item.term() }}</dt>
+      <dd class="mk-description-list__details">
+        <ng-container *ngTemplateOutlet="item.content()" />
+      </dd>
+    }
+  </dl>`, isInline: true, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescriptionList, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-description-list', changeDetection: ChangeDetectionStrategy.OnPush, template: `<dl
+            args: [{ selector: 'mk-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `<dl
     class="mk-description-list__dl"
     [attr.data-layout]="layout()"
     [class.mk-description-list__dl--divided]="divided()"
   >
-    <ng-content />
+    @for (item of items(); track item) {
+      <dt class="mk-description-list__term">{{ item.term() }}</dt>
+      <dd class="mk-description-list__details">
+        <ng-container *ngTemplateOutlet="item.content()" />
+      </dd>
+    }
   </dl>`, host: { class: 'mk-description-list' }, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"] }]
-        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }] } });
-/**
- * A single term/detail row inside {@link MkDescriptionList}. Renders a `<dt>`
- * (the `term`) and a `<dd>` (the projected value). The host is `display:contents`
- * so the `<dt>`/`<dd>` participate directly in the list's grid.
- */
-class MkDescItem {
-    /** The term (label) shown in the `<dt>`. */
-    term = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDescItem, isStandalone: true, selector: "mk-desc-item", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-desc-item" }, ngImport: i0, template: `<dt class="mk-description-list__term">{{ term() }}</dt>
-    <dd class="mk-description-list__details"><ng-content /></dd>`, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-desc-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `<dt class="mk-description-list__term">{{ term() }}</dt>
-    <dd class="mk-description-list__details"><ng-content /></dd>`, host: { class: 'mk-desc-item' }, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { term: [{ type: i0.Input, args: [{ isSignal: true, alias: "term", required: false }] }] } });
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDescItem), { isSignal: true }] }] } });
 
 /**
  * Code — a read-only, themed code block with syntax highlighting, an optional
@@ -3572,11 +3658,11 @@ class MkVirtualScroll {
         this.scrollTop.set(event.target.scrollTop);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkVirtualScroll, isStandalone: true, selector: "mk-virtual-scroll", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-virtual-scroll" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkVirtualScroll, isStandalone: true, selector: "mk-virtual-scroll", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-virtual-scroll" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}.mk-virtual-scroll__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring-color);outline-offset:calc(-1 * var(--mk-focus-ring-width))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkVirtualScroll, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'mk-virtual-scroll' }, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}\n"] }]
+            args: [{ selector: 'mk-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'mk-virtual-scroll' }, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}.mk-virtual-scroll__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring-color);outline-offset:calc(-1 * var(--mk-focus-ring-width))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /** Horizontal movement (px) before a pointer gesture commits to a swipe. */