minerva-design 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # minerva-design
 
+## 1.19.0
+
+### Minor Changes
+
+- 734afb1: Quadrant charts: one shared point card on every renderer, and no Playwright.
+
+  - Fix: after a click, the card of the clicked point no longer stays on the chart and hides the others. A plain chart rings its selected point; only boards (with point actions) keep the card of the selected point. Escape closes the card, and a click beside the points drops a selection the chart made itself.
+  - The hovered point is kept while the parent passes new arrays of the same points, and through new data under a still pointer (e.g. the selection ring added by a click).
+  - Faster hover: the card is DOM of its own, so hovering renders no React, Vue or Angular component, and showing or hiding a drawn label redraws only the foreground canvas.
+  - New in `minerva-design/charts/core`: `createQuadrantPointCard`, `withQuadrantCard` and `QUADRANT_CARD_LINGER_MS`. Vue, Web Components and Angular quadrant charts now show the same card as React (no engine tooltip), with the point actions inside it; `<minerva-quadrant-chart>` adds the `point-card` part.
+  - Crowded cells: a label also tries beside its dot half a line up or down before it is skipped.
+  - Tests: the browser suites are replaced by Vitest tests with happy-dom.
+
 ## 1.18.0
 
 ### Minor Changes

package/custom-elements.json

@@ -7635,7 +7635,7 @@
         },
         {
           "kind": "class",
-          "description": "Four-quadrant matrix (priority matrix, Eisenhower, BCG...) of\n`minerva-design/charts/core` (the `<QuadrantChart>` of React): tinted\nquadrants with titles, dividers and labelled dots placed without\noverlapping labels. With `drag-points`, dots can be dragged to another\nquadrant (`minerva-point-drop`; update `points` to move them).\n\nA visually hidden list of the dots per quadrant lets screen readers and\nkeyboards reach every dot: arrows move between them, Enter clicks\n(`minerva-point-click`) and, with `drag-points`, Shift + arrows move the\nfocused dot to the neighbouring quadrant (`minerva-point-drop`, announced\nin a live region). The focused dot is drawn with a focus ring and\nreported by `minerva-hover`.\n\nSlotted content is placed over the plot: a header per quadrant (in its\nouter corner, replacing the drawn title, badge, description and count)\nand actions next to the active dot (hovered, keyboard-focused, else\n`selected-index`; read it from `activeIndex`). Both receive pointer\nevents; the rest of the plot stays interactive.\n\nPublished as the optional entry `minerva-design/web-components/chart`.",
+          "description": "Four-quadrant matrix (priority matrix, Eisenhower, BCG...) of\n`minerva-design/charts/core` (the `<QuadrantChart>` of React): tinted\nquadrants with titles, dividers and labelled dots placed without\noverlapping labels. With `drag-points`, dots can be dragged to another\nquadrant (`minerva-point-drop`; update `points` to move them).\n\nA visually hidden list of the dots per quadrant lets screen readers and\nkeyboards reach every dot: arrows move between them, Enter clicks\n(`minerva-point-click`) and, with `drag-points`, Shift + arrows move the\nfocused dot to the neighbouring quadrant (`minerva-point-drop`, announced\nin a live region). The focused dot is drawn with a focus ring and\nreported by `minerva-hover`.\n\nOne glass point card names the hovered, keyboard-focused or dragged dot\n(its name and quadrant) in place of the engine tooltip; with slotted\n`point-actions`, the card also shows them and stays on the\n`selected-index` dot (read the dot they act on from `activeIndex`).\n\nSlotted content is placed over the plot: a header per quadrant (in its\nouter corner, replacing the drawn title, badge, description and count)\nand the actions in the point card. Both receive pointer events; the rest\nof the plot stays interactive.\n\nPublished as the optional entry `minerva-design/web-components/chart`.",
           "name": "MinervaQuadrantChart",
           "cssParts": [
             {
@@ -7647,7 +7647,7 @@
               "name": "surface"
             },
             {
-              "description": "The box over the plot holding the slotted headers and actions",
+              "description": "The box over the plot holding the slotted headers and the point card",
               "name": "overlay"
             },
             {
@@ -7655,7 +7655,11 @@
               "name": "quadrant-header"
             },
             {
-              "description": "The zero-size box at the active dot holding the `point-actions` slot",
+              "description": "The glass card of the hovered, focused, dragged (or, with actions, selected) dot",
+              "name": "point-card"
+            },
+            {
+              "description": "The actions box in the point card, holding the `point-actions` slot",
               "name": "point-actions"
             }
           ],
@@ -7677,7 +7681,7 @@
               "name": "quadrant-header-bottom-right"
             },
             {
-              "description": "Content shown at the active dot (e.g. edit / delete buttons), positioned by the slotted element",
+              "description": "Actions shown in the point card of the active dot, beside its name (e.g. compact edit / delete buttons); the card then also stays on the selected dot",
               "name": "point-actions"
             }
           ],
@@ -7859,7 +7863,7 @@
               "type": {
                 "text": "number | null"
               },
-              "description": "Index of the active dot, the one showing the `point-actions` slot: the\nhovered dot, else the keyboard-focused one, else `selectedIndex`\n(`null`: none)",
+              "description": "Index of the active dot, the one whose point card shows the\n`point-actions` slot (hovered, keyboard-focused, else `selectedIndex`\nwhen actions are slotted); `null` while no card is shown or during a\ndrag",
               "readonly": true
             },
             {
@@ -31186,7 +31190,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Task board on a four-quadrant matrix (`<QuadrantTaskBoard>` of React),\nbuilt on `<minerva-quadrant-chart>`: each quadrant header shows its\ntitle, the number of tasks and an add button; the active task (hovered,\nkeyboard-focused or selected) shows edit and delete buttons; an inline\npanel, anchored inside the board at the button or the task, names a task\nand picks its quadrant, or confirms a delete (Escape or a press outside\ncloses it). Tasks can be dragged to another quadrant, or moved with\nShift + arrows once focused; a double click edits a task, a click on an\nempty area adds one there.\n\nControlled, like `<minerva-dashboard-columns>`: the board never changes its\nown `points`. It fires `minerva-points-change` with the next list after\nan add, an edit, a delete, a drag and drop or a keyboard move; set it\nback as `points` to apply it (or keep the old list to refuse it).\n\nTexts are localized (the `locale` attribute, else the library language)\nand can be overridden with `labels`. The host's `aria-label` names the\nchart.\n\nPublished as the optional entry\n`minerva-design/web-components/quadrant-task-board` (it loads the chart\nengine, minerva-design/charts/core).",
+          "description": "Task board on a four-quadrant matrix (`<QuadrantTaskBoard>` of React),\nbuilt on `<minerva-quadrant-chart>`: each quadrant header shows its\ntitle, the number of tasks and an add button; the point card of the\nactive task (hovered, keyboard-focused or selected) shows edit and delete\nbuttons beside its name; an inline panel, anchored inside the board at\nthe button or the task, names a task and picks its quadrant, or confirms\na delete (Escape or a press outside closes it). Tasks can be dragged to\nanother quadrant, or moved with Shift + arrows once focused; a double\nclick edits a task, a click on an empty area adds one there.\n\nControlled, like `<minerva-dashboard-columns>`: the board never changes its\nown `points`. It fires `minerva-points-change` with the next list after\nan add, an edit, a delete, a drag and drop or a keyboard move; set it\nback as `points` to apply it (or keep the old list to refuse it).\n\nTexts are localized (the `locale` attribute, else the library language)\nand can be overridden with `labels`. The host's `aria-label` names the\nchart.\n\nPublished as the optional entry\n`minerva-design/web-components/quadrant-task-board` (it loads the chart\nengine, minerva-design/charts/core).",
           "name": "MinervaQuadrantTaskBoard",
           "cssParts": [
             {

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -5,7 +5,7 @@ import { CODE_MARK_COLORS, DEFAULT_LANGUAGE, DEFAULT_PLAYBACK_RATES, DEFAULT_SKI
 import { FOCUS_SCOPE_UNMOUNT_EVENT, PALETTE_COOKIE_NAME, THEME_COOKIE_NAME, applyDesignAttributes, applyPosition, autoPosition, bindMediaCaptions, centerInScroller, clickedCodeMark, createDashboardDrag, createDismissableLayer, createFocusScope, dashboardDataAdapter, focusElement, generateCSSVariables, getCodeSelectionRange, getDirection, getSystemTheme, getTabbables, hideOthers, isBilingualTheme, isInteractiveEventTarget, lockScroll, logicalArrowKey, nearestInRow, parsePaletteCookie, parsePlacement, parseThemeCookie, primaryColorCss, primaryColorTheme, readCookieValue, resolveTheme, serializeThemeCookie, waitForExitAnimation } from "../../dom/index.js";
 import { FormGroupDirective, NG_VALUE_ACCESSOR, NgControl, NgForm } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
-import { QUADRANT_CORNERS, QUADRANT_TASK_ICONS, applyQuadrantTaskDraft, boxplotData, bubbleSeries, canSaveQuadrantTask, createChart, createChart3D, createDepthChart, createGraphChart, createOrderBook, createOrderBookHeatmap, createQuadrantPointLayer, createShapeChart, createTimeAndSales, createTradingChart, editQuadrantTaskDraft, ganttSeries, heatmapChartOptions, histogramSeries, moveQuadrantTask, newQuadrantTaskDraft, placeQuadrantTaskPanel, quadrantChartOptions, quadrantCountText, quadrantGroups, quadrantLabels, quadrantOf, quadrantTaskColor, quadrantTaskDeleteText, quadrantTaskLabels, removeQuadrantTask, selectionAfterRemove, sparklineOptions, waterfallSeries } from "../../charts/core.js";
+import { QUADRANT_CORNERS, QUADRANT_TASK_ICONS, applyQuadrantTaskDraft, boxplotData, bubbleSeries, canSaveQuadrantTask, createChart, createChart3D, createDepthChart, createGraphChart, createOrderBook, createOrderBookHeatmap, createQuadrantPointCard, createQuadrantPointLayer, createShapeChart, createTimeAndSales, createTradingChart, editQuadrantTaskDraft, ganttSeries, heatmapChartOptions, histogramSeries, moveQuadrantTask, newQuadrantTaskDraft, placeQuadrantTaskPanel, quadrantChartOptions, quadrantCountText, quadrantGroups, quadrantLabels, quadrantOf, quadrantTaskColor, quadrantTaskDeleteText, quadrantTaskLabels, removeQuadrantTask, selectionAfterRemove, sparklineOptions, waterfallSeries, withQuadrantCard } from "../../charts/core.js";
 import { createIconCanvas, getIcon } from "../../icons/core.js";
 const injectIsBrowser = () => isPlatformBrowser(inject(PLATFORM_ID));
 const staticInputs = (config = {}) => ({
@@ -39634,15 +39634,22 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 		this.pointDrop = output();
 		this.lastClick = null;
 		this.focusedIndex = signal(null, ...ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []);
-		this.hoveredIndex = signal(null, ...ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []);
 		this.plot = signal(null, ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
 		this.pointsHost = viewChild.required("points", ...ngDevMode ? [{ debugName: "pointsHost" }] : /* istanbul ignore next */ []);
+		this.cardHost = viewChild("cardHost", ...ngDevMode ? [{ debugName: "cardHost" }] : /* istanbul ignore next */ []);
+		this.viewContainer = inject(ViewContainerRef);
+		this.card = null;
+		this.actionsView = null;
 		this.destroyed = false;
 		this.overlayStyle = computed(() => {
 			const rect = this.plot();
-			if (!rect || !(this.quadrantHeader() || this.pointActions())) return null;
+			if (!rect) return null;
 			return `position:absolute;left:${rect.x}px;top:${rect.y}px;width:${rect.width}px;height:${rect.height}px;pointer-events:none`;
 		}, ...ngDevMode ? [{ debugName: "overlayStyle" }] : /* istanbul ignore next */ []);
+		this.cardHostStyle = computed(() => {
+			const rect = this.plot();
+			return `position:absolute;left:0;top:0;width:${rect?.width ?? 0}px;height:${rect?.height ?? 0}px;pointer-events:none`;
+		}, ...ngDevMode ? [{ debugName: "cardHostStyle" }] : /* istanbul ignore next */ []);
 		this.headers = computed(() => {
 			const rect = this.plot() ?? {
 				width: 0,
@@ -39679,20 +39686,6 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 				};
 			});
 		}, ...ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []);
-		this.activePoint = computed(() => {
-			const index = this.hoveredIndex() ?? this.focusedIndex() ?? this.selectedIndex() ?? null;
-			const point = index === null ? void 0 : this.points()[index];
-			if (index === null || !point || !Number.isFinite(point.x) || !Number.isFinite(point.y)) return [];
-			const at = this.visual(point.x, point.y);
-			return [{
-				context: {
-					$implicit: point,
-					point,
-					index
-				},
-				style: `position:absolute;left:${100 * at.x}%;top:${100 * at.y}%;width:0;height:0;pointer-events:none`
-			}];
-		}, ...ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []);
 		const injector = inject(Injector);
 		let layer = null;
 		afterNextRender(() => {
@@ -39709,12 +39702,91 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 				});
 			}, { injector });
 		});
+		let cardHost = null;
+		afterRenderEffect(() => {
+			const host = this.cardHost()?.nativeElement ?? null;
+			const options = this.cardOptions(this.instance());
+			const focused = this.accessiblePoints() ? this.focusedIndex() : null;
+			this.plot();
+			untracked(() => {
+				if (this.card && cardHost !== host) this.destroyCard();
+				if (!host || !options.chart) return;
+				if (this.card) this.card.update(options);
+				else {
+					cardHost = host;
+					this.card = createQuadrantPointCard(host, options);
+				}
+				this.card.focus(focused);
+				this.renderActions(this.card.index);
+			});
+		});
 		inject(DestroyRef).onDestroy(() => {
 			this.destroyed = true;
 			layer?.destroy();
 			layer = null;
+			this.destroyCard();
 		});
 	}
+	cardOptions(chart) {
+		const actions = !!this.pointActions();
+		return {
+			config: {
+				...this.geometry(),
+				points: this.points(),
+				quadrants: this.quadrants(),
+				xLabel: this.xLabel(),
+				yLabel: this.yLabel(),
+				name: this.name()
+			},
+			locale: this.locale(),
+			pointSize: this.pointSize(),
+			hover: this.tooltip() !== false,
+			selectedIndex: this.selectedIndex(),
+			showSelected: actions,
+			hasActions: () => actions,
+			chart,
+			onClick: (index) => this.clickPoint(index),
+			onChange: (index) => this.renderActions(index)
+		};
+	}
+	renderActions(index) {
+		const card = this.card;
+		if (!card) return;
+		const tpl = untracked(this.pointActions);
+		const point = index === null ? void 0 : untracked(this.points)[index];
+		const current = this.actionsView;
+		if (current && (!point || current.tpl !== tpl || current.ref.context.index !== index)) {
+			if (!current.ref.destroyed) current.ref.destroy();
+			this.actionsView = null;
+		}
+		if (!tpl || !point || index === null) return;
+		let ref = this.actionsView?.ref;
+		if (ref) {
+			if (ref.context.point === point) return;
+			ref.context.$implicit = point;
+			ref.context.point = point;
+		} else {
+			ref = this.viewContainer.createEmbeddedView(tpl, {
+				$implicit: point,
+				point,
+				index
+			});
+			card.actions.append(...ref.rootNodes);
+			this.actionsView = {
+				tpl,
+				ref
+			};
+		}
+		ref.detectChanges();
+		card.place();
+	}
+	destroyCard() {
+		const view = this.actionsView?.ref;
+		if (view && !view.destroyed) view.destroy();
+		this.actionsView = null;
+		this.card?.destroy();
+		this.card = null;
+	}
 	layerOptions() {
 		const selectedIndex = this.selectedIndex();
 		return {
@@ -39732,6 +39804,7 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 			onFocusChange: (index, hover) => {
 				if (this.destroyed) return;
 				this.focusedIndex.set(index);
+				this.card?.focus(index);
 				this.hover.emit(hover);
 			},
 			onClick: (index) => {
@@ -39762,7 +39835,7 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 	}
 	engineOptions() {
 		const headers = !!this.quadrantHeader();
-		const options = quadrantChartOptions({
+		const options = withQuadrantCard(quadrantChartOptions({
 			...this.geometry(),
 			points: this.points(),
 			quadrants: this.quadrants(),
@@ -39777,7 +39850,7 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 			showCounts: headers ? void 0 : this.showCounts(),
 			selectedIndex: this.selectedIndex(),
 			selectedIndices: this.selectedIndices()
-		}, this.commonOptions(), { focusedIndex: this.accessiblePoints() ? this.focusedIndex() : null });
+		}, this.commonOptions(), { focusedIndex: this.accessiblePoints() ? this.focusedIndex() : null }));
 		if (headers) options.annotations = options.annotations?.map((a, i) => i < 4 && a.type === "rect" ? {
 			...a,
 			label: void 0,
@@ -39790,14 +39863,22 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 	bindEngine(chart) {
 		return [
 			...super.bindEngine(chart),
-			chart.on("hover", (event) => this.hoveredIndex.set(event?.items?.[0]?.index ?? null)),
-			chart.on("layout", (rect) => this.plot.set({ ...rect }))
+			chart.on("hover", (event) => this.card?.hover(event?.items?.[0]?.index ?? null)),
+			chart.on("layout", (rect) => this.plot.set({ ...rect })),
+			chart.on("dragStart", (event) => this.card?.drag(event.item.index, {
+				x: event.x,
+				y: event.y
+			})),
+			chart.on("dragEnd", () => this.card?.drag(null))
 		];
 	}
 	clicked(event) {
 		const index = event.items[0]?.index;
-		const point = index === void 0 ? void 0 : this.points()[index];
-		if (!point || index === void 0) return;
+		if (index !== void 0) this.clickPoint(index);
+	}
+	clickPoint(index) {
+		const point = this.points()[index];
+		if (!point) return;
 		const now = Date.now();
 		const last = this.lastClick;
 		const double = last?.index === index && now - last.time < DOUBLE_CLICK_MS;
@@ -39834,6 +39915,10 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 		};
 	}
 	dragged(event) {
+		this.card?.move({
+			x: event.x,
+			y: event.y
+		});
 		const target = this.dropAt(event);
 		if (target) this.pointDrag.emit(target);
 	}
@@ -40020,10 +40105,16 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 				predicate: ["points"],
 				descendants: true,
 				isSignal: true
+			}, {
+				propertyName: "cardHost",
+				first: true,
+				predicate: ["cardHost"],
+				descendants: true,
+				isSignal: true
 			}],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div #surface style=\"position:absolute;inset:0\"></div>\n    @if (overlayStyle(); as style) {\n      <div class=\"minerva-chart-overlay\" [style]=\"style\">\n        @if (quadrantHeader(); as tpl) {\n          @for (header of headers(); track header.corner) {\n            <div [style]=\"header.box\">\n              <div\n                [class]=\"\n                  'minerva-chart-quadrant-header minerva-chart-quadrant-header-' +\n                  header.corner\n                \"\n                [style]=\"header.style\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl\"\n                  [ngTemplateOutletContext]=\"header.context\"\n                />\n              </div>\n            </div>\n          }\n        }\n        @if (pointActions(); as tpl) {\n          @for (active of activePoint(); track active.context.index) {\n            <div\n              class=\"minerva-chart-quadrant-point\"\n              [attr.data-point-index]=\"active.context.index\"\n              [attr.data-label]=\"active.context.point.label ?? null\"\n              [style]=\"active.style\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"tpl\"\n                [ngTemplateOutletContext]=\"active.context\"\n              />\n            </div>\n          }\n        }\n      </div>\n    }\n    <div #points style=\"display:contents\"></div>",
+			template: "<div #surface style=\"position:absolute;inset:0\"></div>\n    @if (overlayStyle(); as style) {\n      <div class=\"minerva-chart-overlay\" [style]=\"style\">\n        @if (quadrantHeader(); as tpl) {\n          @for (header of headers(); track header.corner) {\n            <div [style]=\"header.box\">\n              <div\n                [class]=\"\n                  'minerva-chart-quadrant-header minerva-chart-quadrant-header-' +\n                  header.corner\n                \"\n                [style]=\"header.style\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl\"\n                  [ngTemplateOutletContext]=\"header.context\"\n                />\n              </div>\n            </div>\n          }\n        }\n        <div #cardHost [style]=\"cardHostStyle()\"></div>\n      </div>\n    }\n    <div #points style=\"display:contents\"></div>",
 			isInline: true,
 			dependencies: [{
 				kind: "directive",
@@ -40071,21 +40162,7 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
           }
         }
-        @if (pointActions(); as tpl) {
-          @for (active of activePoint(); track active.context.index) {
-            <div
-              class="minerva-chart-quadrant-point"
-              [attr.data-point-index]="active.context.index"
-              [attr.data-label]="active.context.point.label ?? null"
-              [style]="active.style"
-            >
-              <ng-container
-                [ngTemplateOutlet]="tpl"
-                [ngTemplateOutletContext]="active.context"
-              />
-            </div>
-          }
-        }
+        <div #cardHost [style]="cardHostStyle()"></div>
       </div>
     }
     <div #points style="display:contents"></div>`
@@ -40284,6 +40361,10 @@ i0.ɵɵngDeclareClassMetadata({
 		pointsHost: [{
 			type: i0.ViewChild,
 			args: ["points", { isSignal: true }]
+		}],
+		cardHost: [{
+			type: i0.ViewChild,
+			args: ["cardHost", { isSignal: true }]
 		}]
 	}
 });
@@ -46674,6 +46755,10 @@ var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 		this.corners = QUADRANT_CORNERS;
 		this.scope = injectScope();
 		this.chart = viewChild.required(MnQuadrantChart, ...ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []);
+		this.chartElement = viewChild.required(MnQuadrantChart, {
+			...ngDevMode ? { debugName: "chartElement" } : /* istanbul ignore next */ {},
+			read: ElementRef
+		});
 		this.host = inject(ElementRef).nativeElement;
 		this.document = inject(DOCUMENT);
 		this.panelRef = viewChild("panel", ...ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []);
@@ -46811,12 +46896,13 @@ var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 		return this.lastPointer ? { ...this.lastPointer } : emptyBox();
 	}
 	pointBox(index) {
-		const el = this.host.querySelector(`.minerva-chart-quadrant-point[data-point-index="${index}"]`);
-		if (!el) return this.pointerBox();
-		const box = this.boxOf(el);
+		const point = this.points()[index];
+		const at = point ? this.chart().instance()?.toPixel(point.x, point.y) : null;
+		if (!at) return this.pointerBox();
+		const box = this.boxOf(this.chartElement().nativeElement);
 		return {
-			x: box.x - DOT,
-			y: box.y - DOT,
+			x: box.x + at.x - DOT,
+			y: box.y + at.y - DOT,
 			width: 20,
 			height: 20
 		};
@@ -47181,6 +47267,14 @@ var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 					descendants: true,
 					isSignal: true
 				},
+				{
+					propertyName: "chartElement",
+					first: true,
+					predicate: MnQuadrantChart,
+					descendants: true,
+					read: ElementRef,
+					isSignal: true
+				},
 				{
 					propertyName: "panelRef",
 					first: true,
@@ -47206,7 +47300,7 @@ var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 			],
 			exportAs: ["mnQuadrantTaskBoard"],
 			ngImport: i0,
-			template: "\n    <mn-quadrant-chart\n      [points]=\"points()\"\n      [locale]=\"language()\"\n      [selectedIndex]=\"selected()\"\n      [draggable]=\"draggable() ?? true\"\n      [height]=\"height()\"\n      [width]=\"width()\"\n      [renderer]=\"renderer()\"\n      [legend]=\"legend()\"\n      [tooltip]=\"tooltip()\"\n      [crosshair]=\"crosshair()\"\n      [annotations]=\"annotations()\"\n      [interaction]=\"interaction()\"\n      [padding]=\"padding()\"\n      [palette]=\"palette()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [xDomain]=\"xDomain()\"\n      [yDomain]=\"yDomain()\"\n      [xSplit]=\"xSplit()\"\n      [ySplit]=\"ySplit()\"\n      [quadrants]=\"quadrants()\"\n      [xLabel]=\"xLabel()\"\n      [yLabel]=\"yLabel()\"\n      [axisLabels]=\"axisLabels()\"\n      [showTicks]=\"showTicks()\"\n      [reverseX]=\"reverseX()\"\n      [showLabels]=\"showLabels()\"\n      [pointSize]=\"pointSize()\"\n      [name]=\"name()\"\n      [selectedIndices]=\"selectedIndices()\"\n      [accessiblePoints]=\"accessiblePoints()\"\n      [quadrantHeader]=\"header\"\n      [pointActions]=\"actions\"\n      (hover)=\"hover.emit($event)\"\n      (zoom)=\"zoom.emit($event)\"\n      (rendererChange)=\"rendererChange.emit($event)\"\n      (pointClick)=\"onPointClick($event)\"\n      (pointDoubleClick)=\"edit($event.index)\"\n      (pointDrag)=\"pointDrag.emit($event)\"\n      (pointDrop)=\"onPointDrop($event)\"\n      (quadrantClick)=\"add($event.quadrant, pointerBox(), $event)\"\n    />\n    <ng-template #header let-corner let-info=\"info\">\n      <div [class]=\"s.header\" [attr.data-corner]=\"corner\">\n        @if (info.region?.badge) {\n          <span [class]=\"s.badge\">{{ info.region.badge }}</span>\n        }\n        <span [class]=\"s.title\">{{ title(corner) }}</span>\n        @if (showCounts() !== false) {\n          <span [class]=\"s.count\">{{ countText(info.points) }}</span>\n        }\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [class]=\"s.add\"\n          [label]=\"texts().add + ' · ' + title(corner)\"\n          [attr.aria-expanded]=\"adding() === corner\"\n          (click)=\"add(corner, boxOf($event.currentTarget))\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.add\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    <ng-template #actions let-index=\"index\">\n      <div\n        role=\"toolbar\"\n        [attr.aria-label]=\"texts().actions\"\n        [class]=\"s.actions\"\n        (pointerdown)=\"$event.stopPropagation()\"\n      >\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [label]=\"texts().edit\"\n          (click)=\"edit(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.edit\" /></svg>\n        </button>\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          color=\"danger\"\n          [label]=\"texts().delete\"\n          (click)=\"confirmRemove(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.delete\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    @if (draft(); as current) {\n      <div\n        #panel\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [class]=\"s.panel\"\n        [attr.data-quadrant-task-panel]=\"\n          current.index === null ? 'add' : 'edit'\n        \"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <form [class]=\"s.form\" (submit)=\"save($event)\">\n          <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">\n            {{ current.index === null ? texts().add : texts().edit }}\n          </h3>\n          <label [class]=\"s.field\">\n            <span>{{ texts().name }}</span>\n            <mn-input\n              required\n              size=\"small\"\n              [value]=\"current.label\"\n              [aria-label]=\"texts().name\"\n              (valueChange)=\"setLabel($event ?? '')\"\n            />\n          </label>\n          <fieldset [class]=\"s.quadrants\">\n            <legend>{{ texts().quadrant }}</legend>\n            <div [class]=\"s.quadrantGrid\">\n              @for (corner of corners; track corner) {\n                <label [class]=\"s.quadrant\" [attr.data-corner]=\"corner\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"ids.quadrant\"\n                    [value]=\"corner\"\n                    [checked]=\"current.quadrant === corner\"\n                    (change)=\"setQuadrant(corner)\"\n                  />\n                  <span\n                    [class]=\"s.swatch\"\n                    [style.background]=\"color(corner)\"\n                    aria-hidden=\"true\"\n                  ></span>\n                  <span [class]=\"s.quadrantName\">{{ title(corner) }}</span>\n                </label>\n              }\n            </div>\n          </fieldset>\n          <div [class]=\"s.footer\">\n            <button\n              mnButton\n              size=\"small\"\n              color=\"neutral\"\n              variant=\"ghost\"\n              (click)=\"close()\"\n            >\n              {{ texts().cancel }}\n            </button>\n            <button mnButton size=\"small\" type=\"submit\" [disabled]=\"!canSave()\">\n              {{ texts().save }}\n            </button>\n          </div>\n        </form>\n      </div>\n    }\n    @if (deletingPoint()) {\n      <div\n        #panel\n        role=\"alertdialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [attr.aria-describedby]=\"ids.text\"\n        [class]=\"s.panel\"\n        data-quadrant-task-panel=\"delete\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">{{ texts().delete }}</h3>\n        <p [id]=\"ids.text\" [class]=\"s.panelText\">{{ deleteText() }}</p>\n        <div [class]=\"s.footer\">\n          <button\n            #deleteCancel\n            mnButton\n            size=\"small\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            (click)=\"close()\"\n          >\n            {{ texts().cancel }}\n          </button>\n          <button mnButton size=\"small\" color=\"danger\" (click)=\"remove()\">\n            {{ texts().confirmDelete }}\n          </button>\n        </div>\n      </div>\n    }\n  ",
+			template: "\n    <mn-quadrant-chart\n      [points]=\"points()\"\n      [locale]=\"language()\"\n      [selectedIndex]=\"selected()\"\n      [draggable]=\"draggable() ?? true\"\n      [height]=\"height()\"\n      [width]=\"width()\"\n      [renderer]=\"renderer()\"\n      [legend]=\"legend()\"\n      [tooltip]=\"tooltip()\"\n      [crosshair]=\"crosshair()\"\n      [annotations]=\"annotations()\"\n      [interaction]=\"interaction()\"\n      [padding]=\"padding()\"\n      [palette]=\"palette()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [xDomain]=\"xDomain()\"\n      [yDomain]=\"yDomain()\"\n      [xSplit]=\"xSplit()\"\n      [ySplit]=\"ySplit()\"\n      [quadrants]=\"quadrants()\"\n      [xLabel]=\"xLabel()\"\n      [yLabel]=\"yLabel()\"\n      [axisLabels]=\"axisLabels()\"\n      [showTicks]=\"showTicks()\"\n      [reverseX]=\"reverseX()\"\n      [showLabels]=\"showLabels()\"\n      [pointSize]=\"pointSize()\"\n      [name]=\"name()\"\n      [selectedIndices]=\"selectedIndices()\"\n      [accessiblePoints]=\"accessiblePoints()\"\n      [quadrantHeader]=\"header\"\n      [pointActions]=\"actions\"\n      (hover)=\"hover.emit($event)\"\n      (zoom)=\"zoom.emit($event)\"\n      (rendererChange)=\"rendererChange.emit($event)\"\n      (pointClick)=\"onPointClick($event)\"\n      (pointDoubleClick)=\"edit($event.index)\"\n      (pointDrag)=\"pointDrag.emit($event)\"\n      (pointDrop)=\"onPointDrop($event)\"\n      (quadrantClick)=\"add($event.quadrant, pointerBox(), $event)\"\n    />\n    <ng-template #header let-corner let-info=\"info\">\n      <div [class]=\"s.header\" [attr.data-corner]=\"corner\">\n        @if (info.region?.badge) {\n          <span [class]=\"s.badge\">{{ info.region.badge }}</span>\n        }\n        <span [class]=\"s.title\">{{ title(corner) }}</span>\n        @if (showCounts() !== false) {\n          <span [class]=\"s.count\">{{ countText(info.points) }}</span>\n        }\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [class]=\"s.add\"\n          [label]=\"texts().add + ' · ' + title(corner)\"\n          [attr.aria-expanded]=\"adding() === corner\"\n          (click)=\"add(corner, boxOf($event.currentTarget))\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.add\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    <ng-template #actions let-index=\"index\">\n      <div\n        role=\"toolbar\"\n        [attr.aria-label]=\"texts().actions\"\n        [class]=\"s.cardActions\"\n        (pointerdown)=\"$event.stopPropagation()\"\n      >\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [label]=\"texts().edit\"\n          (click)=\"edit(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.edit\" /></svg>\n        </button>\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          color=\"danger\"\n          [label]=\"texts().delete\"\n          (click)=\"confirmRemove(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.delete\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    @if (draft(); as current) {\n      <div\n        #panel\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [class]=\"s.panel\"\n        [attr.data-quadrant-task-panel]=\"\n          current.index === null ? 'add' : 'edit'\n        \"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <form [class]=\"s.form\" (submit)=\"save($event)\">\n          <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">\n            {{ current.index === null ? texts().add : texts().edit }}\n          </h3>\n          <label [class]=\"s.field\">\n            <span>{{ texts().name }}</span>\n            <mn-input\n              required\n              size=\"small\"\n              [value]=\"current.label\"\n              [aria-label]=\"texts().name\"\n              (valueChange)=\"setLabel($event ?? '')\"\n            />\n          </label>\n          <fieldset [class]=\"s.quadrants\">\n            <legend>{{ texts().quadrant }}</legend>\n            <div [class]=\"s.quadrantGrid\">\n              @for (corner of corners; track corner) {\n                <label [class]=\"s.quadrant\" [attr.data-corner]=\"corner\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"ids.quadrant\"\n                    [value]=\"corner\"\n                    [checked]=\"current.quadrant === corner\"\n                    (change)=\"setQuadrant(corner)\"\n                  />\n                  <span\n                    [class]=\"s.swatch\"\n                    [style.background]=\"color(corner)\"\n                    aria-hidden=\"true\"\n                  ></span>\n                  <span [class]=\"s.quadrantName\">{{ title(corner) }}</span>\n                </label>\n              }\n            </div>\n          </fieldset>\n          <div [class]=\"s.footer\">\n            <button\n              mnButton\n              size=\"small\"\n              color=\"neutral\"\n              variant=\"ghost\"\n              (click)=\"close()\"\n            >\n              {{ texts().cancel }}\n            </button>\n            <button mnButton size=\"small\" type=\"submit\" [disabled]=\"!canSave()\">\n              {{ texts().save }}\n            </button>\n          </div>\n        </form>\n      </div>\n    }\n    @if (deletingPoint()) {\n      <div\n        #panel\n        role=\"alertdialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [attr.aria-describedby]=\"ids.text\"\n        [class]=\"s.panel\"\n        data-quadrant-task-panel=\"delete\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">{{ texts().delete }}</h3>\n        <p [id]=\"ids.text\" [class]=\"s.panelText\">{{ deleteText() }}</p>\n        <div [class]=\"s.footer\">\n          <button\n            #deleteCancel\n            mnButton\n            size=\"small\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            (click)=\"close()\"\n          >\n            {{ texts().cancel }}\n          </button>\n          <button mnButton size=\"small\" color=\"danger\" (click)=\"remove()\">\n            {{ texts().confirmDelete }}\n          </button>\n        </div>\n      </div>\n    }\n  ",
 			isInline: true,
 			dependencies: [
 				{
@@ -47417,7 +47511,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div
         role="toolbar"
         [attr.aria-label]="texts().actions"
-        [class]="s.actions"
+        [class]="s.cardActions"
         (pointerdown)="$event.stopPropagation()"
       >
         <button
@@ -47823,6 +47917,13 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => MnQuadrantChart), { isSignal: true }]
 		}],
+		chartElement: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MnQuadrantChart), {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
 		panelRef: [{
 			type: i0.ViewChild,
 			args: ["panel", { isSignal: true }]