minerva-design 1.17.2 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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
+
+- 39a6cf4: QuadrantChart (React): one point card for hover, focus, selection and drag. The card carries the point's dot (placed exactly on the point), its name and its quadrant (with the badge), and the point's actions (`renderPointActions`) beside the name. The engine tooltip and hover label chip are gone, and the drawn label of the active point gives way to the card while the other labels keep their places. `renderTooltip` now fills the card. The card stays while the pointer moves from the dot to its actions, mirrors near the right edge (without flipping back and forth during a drag), and stays inside the plot near the top and bottom edges. Clicking its name selects the point.
+
+  QuadrantTaskBoard: compact edit and delete buttons (xsmall, 14px icons). On React they sit in the task card; on Vue, Angular and Web Components the toolbar above the task is smaller. On narrow phones (≤ 360px) the mini program headers give the title the room: the badge is hidden and the chips are tighter.
+
+  Chart engine: new `interaction.hoverLabel` option (`false` keeps a hovered dot's label as drawn) and `ChartInstance.setLabelHidden()` (hides a point's drawn label but keeps its place). Labels kept in quadrant cells now keep a gap between each other and never sit nearer to another dot than to their own, so crowded quadrants no longer pair a name with the wrong dot.
+
 ## 1.17.2
 
 ### Patch 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 = {}) => ({
@@ -1513,26 +1513,27 @@ const progressIndicatorStyles = {
 };
 const proseStyles = { prose: "_prose_3xiks_1" };
 const quadrantTaskBoardStyles = {
-	actions: "_actions_15tn3_58",
-	"actions-in": "_actions-in_15tn3_1",
-	add: "_add_15tn3_54",
-	badge: "_badge_15tn3_35",
-	board: "_board_15tn3_1",
-	count: "_count_15tn3_40",
-	field: "_field_15tn3_89",
-	footer: "_footer_15tn3_213",
-	form: "_form_15tn3_83",
-	header: "_header_15tn3_11",
-	panel: "_panel_15tn3_97",
-	"panel-in": "_panel-in_15tn3_1",
-	panelText: "_panelText_15tn3_134",
-	panelTitle: "_panelTitle_15tn3_127",
-	quadrant: "_quadrant_15tn3_142",
-	quadrantGrid: "_quadrantGrid_15tn3_156",
-	quadrantName: "_quadrantName_15tn3_206",
-	quadrants: "_quadrants_15tn3_142",
-	swatch: "_swatch_15tn3_199",
-	title: "_title_15tn3_29"
+	actions: "_actions_1m92c_58",
+	"actions-in": "_actions-in_1m92c_1",
+	add: "_add_1m92c_54",
+	badge: "_badge_1m92c_35",
+	board: "_board_1m92c_1",
+	cardActions: "_cardActions_1m92c_83",
+	count: "_count_1m92c_40",
+	field: "_field_1m92c_95",
+	footer: "_footer_1m92c_219",
+	form: "_form_1m92c_89",
+	header: "_header_1m92c_11",
+	panel: "_panel_1m92c_103",
+	"panel-in": "_panel-in_1m92c_1",
+	panelText: "_panelText_1m92c_140",
+	panelTitle: "_panelTitle_1m92c_133",
+	quadrant: "_quadrant_1m92c_148",
+	quadrantGrid: "_quadrantGrid_1m92c_162",
+	quadrantName: "_quadrantName_1m92c_212",
+	quadrants: "_quadrants_1m92c_148",
+	swatch: "_swatch_1m92c_205",
+	title: "_title_1m92c_29"
 };
 const radioStyles = {
 	circle: "_circle_ffxaw_87",
@@ -39633,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,
@@ -39678,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(() => {
@@ -39708,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 {
@@ -39731,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) => {
@@ -39761,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(),
@@ -39776,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,
@@ -39789,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;
@@ -39833,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);
 	}
@@ -40019,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",
@@ -40070,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>`
@@ -40283,6 +40361,10 @@ i0.ɵɵngDeclareClassMetadata({
 		pointsHost: [{
 			type: i0.ViewChild,
 			args: ["points", { isSignal: true }]
+		}],
+		cardHost: [{
+			type: i0.ViewChild,
+			args: ["cardHost", { isSignal: true }]
 		}]
 	}
 });
@@ -46606,6 +46688,7 @@ const emptyBox = () => ({
 	height: 0
 });
 const ICON_ATTRS = `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"`;
+const ACTION_ICON_ATTRS = `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"`;
 var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 	constructor() {
 		this.points = input.required(...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
@@ -46672,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 */ []);
@@ -46809,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
 		};
@@ -47179,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,
@@ -47204,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=\"small\"\n          variant=\"ghost\"\n          [label]=\"texts().edit\"\n          (click)=\"edit(index)\"\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.edit\" /></svg>\n        </button>\n        <button\n          mnIconButton\n          size=\"small\"\n          variant=\"ghost\"\n          color=\"danger\"\n          [label]=\"texts().delete\"\n          (click)=\"confirmRemove(index)\"\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.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: [
 				{
@@ -47415,27 +47511,27 @@ i0.ɵɵngDeclareClassMetadata({
       <div
         role="toolbar"
         [attr.aria-label]="texts().actions"
-        [class]="s.actions"
+        [class]="s.cardActions"
         (pointerdown)="$event.stopPropagation()"
       >
         <button
           mnIconButton
-          size="small"
+          size="xsmall"
           variant="ghost"
           [label]="texts().edit"
           (click)="edit(index)"
         >
-          <svg ${ICON_ATTRS}><path [attr.d]="icons.edit" /></svg>
+          <svg ${ACTION_ICON_ATTRS}><path [attr.d]="icons.edit" /></svg>
         </button>
         <button
           mnIconButton
-          size="small"
+          size="xsmall"
           variant="ghost"
           color="danger"
           [label]="texts().delete"
           (click)="confirmRemove(index)"
         >
-          <svg ${ICON_ATTRS}><path [attr.d]="icons.delete" /></svg>
+          <svg ${ACTION_ICON_ATTRS}><path [attr.d]="icons.delete" /></svg>
         </button>
       </div>
     </ng-template>
@@ -47821,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 }]