@c2n/chart 0.0.7 → 0.0.9

package/README.md

@@ -1,16 +1,20 @@
 # @c2n/chart
 
-Line, area, bar, sparkline and pie charts as custom elements, from one package.
+Line, area, bar, sparkline, pie, gauge, scatter and candlestick charts as custom elements, from one package.
 
 ```bash
 npm install @c2n/chart uplot     # line, area, bar, sparkline
-npm install @c2n/chart echarts   # pie
+npm install @c2n/chart echarts   # pie, gauge, scatter, candlestick
 ```
 
 ```html
-<c2-line-chart x-field="month" legend="bottom" data='[{ "month": 1, "revenue": 128, "cost": 74 }]'>
-  <c2-chart-series field="revenue" label="Revenue"></c2-chart-series>
-  <c2-chart-series field="cost" label="Cost"></c2-chart-series>
+<c2-line-chart
+  x-field="year"
+  data='[{"year":2022,"nuclear":294.73,"wind":38.2,"solar":19.34},{"year":2023,"nuclear":338.2,"wind":50.48,"solar":22.59},{"year":2024,"nuclear":380.45,"wind":45.43,"solar":24.87}]'
+>
+  <c2-chart-series field="nuclear" label="Nuclear"></c2-chart-series>
+  <c2-chart-series field="wind" label="Wind"></c2-chart-series>
+  <c2-chart-series field="solar" label="Solar"></c2-chart-series>
 </c2-line-chart>
 ```
 
@@ -21,14 +25,34 @@ import '@c2n/chart' // all of them
 
 ## Elements
 
-| Tag               | Engine  | For                                             |
-| ----------------- | ------- | ----------------------------------------------- |
-| `c2-line-chart`   | uPlot   | Time or numeric trends                          |
-| `c2-area-chart`   | uPlot   | The same, with the region under the line filled |
-| `c2-bar-chart`    | uPlot   | Categorical or time-bucketed values             |
-| `c2-sparkline`    | uPlot   | A chromeless trend for a table cell or KPI row  |
-| `c2-pie-chart`    | ECharts | Parts of a whole, with a donut mode             |
-| `c2-chart-series` | —       | A series definition; renders nothing            |
+| Tag                    | Engine  | For                                             |
+| ---------------------- | ------- | ----------------------------------------------- |
+| `c2-line-chart`        | uPlot   | Time or numeric trends                          |
+| `c2-area-chart`        | uPlot   | The same, with the region under the line filled |
+| `c2-bar-chart`         | uPlot   | Categorical or time-bucketed values             |
+| `c2-sparkline`         | uPlot   | A chromeless trend for a table cell or KPI row  |
+| `c2-pie-chart`         | ECharts | Parts of a whole, with a donut mode             |
+| `c2-gauge-chart`       | ECharts | A bounded current value or target               |
+| `c2-scatter-chart`     | ECharts | Relationships, clusters and outliers            |
+| `c2-candlestick-chart` | ECharts | Open-high-low-close financial sessions          |
+| `c2-chart-series`      | —       | A series definition; renders nothing            |
+| `c2-chart-legend`      | —       | A linked legend placed anywhere in the layout   |
+| `c2-chart-tooltip`     | —       | A linked floating or inline tooltip             |
+
+## Independent legend and tooltip
+
+The chart renders built-in chrome by default. To own its layout, link companion elements to the chart by id;
+each companion automatically replaces its corresponding built-in display:
+
+```html
+<c2-line-chart id="sales" data="..."></c2-line-chart>
+<c2-chart-legend for="sales"></c2-chart-legend>
+<c2-chart-tooltip for="sales"></c2-chart-tooltip>
+```
+
+The legend occupies its normal HTML position. The tooltip floats beside the hovered point by default and
+flips at viewport edges; `position="inline"` makes it occupy its authored position. Assign `renderLegend`,
+`renderLegendItem` or `renderTooltip` for data-driven custom Lit templates.
 
 ## Engines
 
@@ -42,6 +66,11 @@ whichever engines your charts need.
 Internally everything becomes one columnar frame of `Float64Array`s, which is the shape uPlot draws
 natively and what makes appending O(1).
 
+The documentation examples share a France 2015–2024 extract from the public
+[Our World in Data Energy dataset](https://github.com/owid/energy-data), measured in terawatt-hours. Line,
+area, bar, scatter and sparkline charts read the annual rows directly; radial charts derive a focused
+metric or one slice per energy source from a selected year. Candlesticks use public OHLC observations.
+
 ```js
 chart.data = rows // full replace
 chart.revision++ // after mutating the array in place
@@ -75,7 +104,8 @@ messages) is ordinary DOM and does expose parts.
 
 ## Events
 
-`chart-ready`, `chart-error`, `point-click`, `point-hover`, `range-change` and `series-toggle`. The
+`chart-ready`, `chart-error`, `point-click`, `point-hover`, `range-change`, `series-toggle`, `legend-change`
+and `tooltip-change`. The
 semantic ones do not bubble: several components fire similarly named events, so a listener belongs on the
 element itself. The host also carries `data-chart-ready` once the first frame is drawn, which is the
 signal to wait on in a test.

package/dist/area-chart.js

@@ -1,5 +1,5 @@
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { r as withAlpha } from "./uplot-paths-ChKohvIX.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { r as withAlpha } from "./uplot-paths-D5HCEKRV.js";
 import { LineChart } from "./line-chart.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";

package/dist/bar-chart.js

@@ -1,6 +1,7 @@
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
-import { t as barPaths } from "./uplot-paths-ChKohvIX.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as UplotChartBase } from "./uplot-chart-base-CLhgOeM_.js";
+import { t as barPaths } from "./uplot-paths-D5HCEKRV.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/bar-chart.ts
@@ -16,7 +17,7 @@ var BarChart = class BarChart extends UplotChartBase {
 			stroke: color,
 			fill: color,
 			width: 0,
-			paths: barPaths(this.barWidth, this.barGap, index, context.series.length),
+			paths: barPaths(this.barWidth, this.barGap, index, context.series.length, context.theme.barRadius),
 			points: { show: false }
 		};
 	}

package/dist/candlestick-chart.js

@@ -0,0 +1,139 @@
+import { columnValue } from "./chart-data.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-CImXMzVk.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/candlestick-chart.ts
+var CandlestickChart = class CandlestickChart extends EchartsChartBase {
+	constructor() {
+		super();
+		this.features = ["candlestick", "grid"];
+		this.openField = "open";
+		this.closeField = "close";
+		this.lowField = "low";
+		this.highField = "high";
+		this.name = "Price";
+		this.xType = "category";
+		this.tooltip = "axis";
+		this.legend = "none";
+	}
+	inferredSeries() {
+		return [
+			{
+				field: this.openField,
+				label: "Open"
+			},
+			{
+				field: this.closeField,
+				label: "Close"
+			},
+			{
+				field: this.lowField,
+				label: "Low"
+			},
+			{
+				field: this.highField,
+				label: "High"
+			}
+		];
+	}
+	coordinateSystem(context) {
+		const axisLine = { lineStyle: { color: context.theme.gridColor } };
+		const axisLabel = {
+			color: context.theme.axisColor,
+			fontSize: context.theme.fontSize
+		};
+		return {
+			grid: {
+				left: 48,
+				right: 16,
+				top: 16,
+				bottom: 32,
+				containLabel: false
+			},
+			xAxis: {
+				type: "category",
+				data: this.xLabels(),
+				boundaryGap: true,
+				axisLine,
+				axisLabel
+			},
+			yAxis: {
+				type: "value",
+				scale: true,
+				axisLine,
+				axisLabel,
+				splitLine: { lineStyle: { color: context.theme.gridColor } }
+			}
+		};
+	}
+	projectData(frame) {
+		const [open, close, low, high] = frame.columns;
+		return [Array.from({ length: frame.length }, (_item, index) => [
+			open ? columnValue(open, index) : null,
+			close ? columnValue(close, index) : null,
+			low ? columnValue(low, index) : null,
+			high ? columnValue(high, index) : null
+		])];
+	}
+	buildOptions(context) {
+		return {
+			...super.buildOptions(context),
+			series: [{
+				name: this.name,
+				...this.seriesOption(0, context)
+			}]
+		};
+	}
+	seriesOption(_index, context) {
+		return {
+			type: "candlestick",
+			itemStyle: {
+				color: context.theme.positive,
+				color0: context.theme.negative,
+				borderColor: context.theme.positive,
+				borderColor0: context.theme.negative
+			}
+		};
+	}
+	legendItems() {
+		const visible = !this.hiddenSeries.has(0);
+		return [{
+			label: this.name,
+			color: this.themeController.theme.positive,
+			visible,
+			toggle: () => this.setSeriesVisible(0, !visible),
+			series: {
+				field: this.openField,
+				label: this.name
+			},
+			index: 0
+		}];
+	}
+	xLabels() {
+		const frame = this.frame;
+		if (!frame) return [];
+		return Array.from({ length: frame.length }, (_item, index) => frame.labels?.[index] ?? this.formatX(columnValue(frame.x, index) ?? index));
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "open-field"
+})], CandlestickChart.prototype, "openField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "close-field"
+})], CandlestickChart.prototype, "closeField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "low-field"
+})], CandlestickChart.prototype, "lowField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "high-field"
+})], CandlestickChart.prototype, "highField", void 0);
+__decorate([property({ type: String })], CandlestickChart.prototype, "name", void 0);
+CandlestickChart = __decorate([customElement("c2-candlestick-chart")], CandlestickChart);
+//#endregion
+export { CandlestickChart };

package/dist/{chart-base-C4-1TyKq.js → chart-base-CEZvMKwW.js}

@@ -1,11 +1,12 @@
 import { ChartFrameBuilder, columnValue } from "./chart-data.js";
 import { ChartThemeController, PROBE_COLORS } from "./chart-theme.js";
-import { i as __decorate, n as SERIES_CHANGE_EVENT, r as SERIES_TAG } from "./chart-series-BnpHO3lm.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { SERIES_CHANGE_EVENT, SERIES_TAG } from "./chart-series.js";
 import { property, query, state } from "lit/decorators.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
 //#region src/chart.scss?inline
-var chart_default = "@charset \"UTF-8\";\n/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--c2-chart--width,100%);\n  height: var(--c2-chart--height,320px);\n  /*\n   * The plot is absolutely positioned, so nothing inside the host contributes intrinsic width. As a flex\n   * item — which is what every example frame in the docs site makes it — the host would otherwise shrink\n   * to its legend, and to nothing at all when there is no legend. `min-width: 0` keeps it able to shrink\n   * below its content when a layout genuinely needs that.\n   */\n  min-width: 0;\n  padding: var(--c2-chart--padding,12px);\n  background: var(--c2-chart--background,#ffffff);\n  color: var(--c2-chart--color,#18181b);\n  font-family: var(--c2-chart--font-family,inherit);\n  font-size: var(--c2-chart--font-size,12px);\n  border-top: var(--c2-chart--border-top,1px solid #e4e4e7);\n  border-right: var(--c2-chart--border-right,1px solid #e4e4e7);\n  border-bottom: var(--c2-chart--border-bottom,1px solid #e4e4e7);\n  border-left: var(--c2-chart--border-left,1px solid #e4e4e7);\n  border-top-left-radius: var(--c2-chart--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-chart--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-chart--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-chart--border-bottom-right-radius,8px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.frame {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/*\n * The plot area is the engine's territory. `contain: strict` plus absolute positioning means the canvas\n * the engine sizes inside it can never feed its own size back into the ResizeObserver watching this box,\n * which is what makes the resize loop structurally impossible rather than merely unlikely.\n */\n.plot-area {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.plot {\n  position: absolute;\n  inset: 0;\n  contain: strict;\n}\n\n.plot canvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  pointer-events: none;\n  will-change: transform;\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-chart__tooltip--gap,6px);\n  padding: var(--c2-chart__tooltip--padding,8px 10px);\n  border-radius: var(--c2-chart__tooltip--border-radius,6px);\n  background: var(--c2-chart__tooltip--background-color,#18181b);\n  color: var(--c2-chart__tooltip--color,#fafafa);\n  font-size: var(--c2-chart__tooltip--font-size,12px);\n  box-shadow: var(--c2-chart__tooltip--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  white-space: nowrap;\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n\n.tooltip-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tooltip-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.tooltip-label {\n  flex: 1 1 auto;\n}\n\n.tooltip-value {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: auto;\n  display: flex;\n  gap: 4px;\n}\n\n.state {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--c2-chart__state--color,#71717a);\n  font-size: var(--c2-chart__state--font-size,14px);\n  background: var(--c2-chart--background,#ffffff);\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--c2-chart__legend--gap,12px);\n  padding: var(--c2-chart__legend--padding,8px 0 0);\n  color: var(--c2-chart__legend--color,#71717a);\n  font-size: var(--c2-chart__legend--font-size,12px);\n}\n\n.legend--start,\n.legend--end {\n  flex-direction: column;\n  align-content: flex-start;\n  flex: 0 0 auto;\n  align-self: center;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* The legend is on an inline edge, so the frame runs as a row. */\n.frame--side {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.legend-item[aria-pressed=false] {\n  opacity: var(--c2-chart__legend__disabled--opacity,0.38);\n}\n\n.legend-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.definitions {\n  display: none;\n}\n\n/*\n * Colour probes. `getComputedStyle().getPropertyValue()` hands back the author's text for a `var()` or\n * `color-mix()` chain, which no canvas engine can parse; the computed `color` of an element always\n * resolves to `rgb(…)`. `display: none` keeps them free.\n */\n.theme-probe {\n  display: none;\n}\n.theme-probe i:nth-child(1) {\n  color: var(--c2-chart__series-1--color,#0265dc);\n}\n.theme-probe i:nth-child(2) {\n  color: var(--c2-chart__series-2--color,#ea580c);\n}\n.theme-probe i:nth-child(3) {\n  color: var(--c2-chart__series-3--color,#0f766e);\n}\n.theme-probe i:nth-child(4) {\n  color: var(--c2-chart__series-4--color,#db2777);\n}\n.theme-probe i:nth-child(5) {\n  color: var(--c2-chart__series-5--color,#a16207);\n}\n.theme-probe i:nth-child(6) {\n  color: var(--c2-chart__series-6--color,#7c3aed);\n}\n.theme-probe i:nth-child(7) {\n  color: var(--c2-chart__series-7--color,#0891b2);\n}\n.theme-probe i:nth-child(8) {\n  color: var(--c2-chart__series-8--color,#52525b);\n}\n.theme-probe i:nth-child(9) {\n  color: var(--c2-chart__axis--color,#71717a);\n}\n.theme-probe i:nth-child(10) {\n  color: var(--c2-chart__grid--color,#e4e4e7);\n}\n.theme-probe i:nth-child(11) {\n  color: var(--c2-chart--color,#18181b);\n}\n.theme-probe i:nth-child(12) {\n  color: var(--c2-chart__muted--color,#71717a);\n}\n.theme-probe i:nth-child(13) {\n  color: var(--c2-chart__tooltip--background-color,#18181b);\n}\n.theme-probe i:nth-child(14) {\n  color: var(--c2-chart__tooltip--color,#fafafa);\n}\n.theme-probe i:nth-child(15) {\n  color: var(--c2-chart__crosshair--color,#a1a1aa);\n}\n.theme-probe i:nth-child(16) {\n  color: var(--c2-chart__positive--color,#16a34a);\n}\n.theme-probe i:nth-child(17) {\n  color: var(--c2-chart__negative--color,#dc2626);\n}\n.theme-probe i:nth-child(18) {\n  color: var(--c2-chart__surface--color,#ffffff);\n}\n\n/*\n * uPlot's structural CSS, hand-ported.\n *\n * `uplot/dist/uPlot.min.css` is a global stylesheet and a shadow root cannot see it, so the rules the\n * engine's DOM depends on live here instead. Only the structural half is kept: the legend and title rules\n * are dropped because this component renders its own. Version-coupled to the `uplot` peer range — re-check\n * after an upgrade.\n */\n.uplot,\n.uplot *,\n.uplot *::before,\n.uplot *::after {\n  box-sizing: border-box;\n}\n\n.uplot {\n  font-family: var(--c2-chart--font-family,inherit);\n  line-height: 1.5;\n  width: min-content;\n}\n\n.u-wrap {\n  position: relative;\n  user-select: none;\n}\n\n.u-over,\n.u-under {\n  position: absolute;\n}\n\n.u-under {\n  overflow: hidden;\n}\n\n.uplot canvas {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.u-axis {\n  position: absolute;\n}\n\n.u-select {\n  position: absolute;\n  pointer-events: none;\n  background: rgba(0, 0, 0, 0.07);\n}\n\n.u-cursor-x,\n.u-cursor-y {\n  position: absolute;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.u-hz .u-cursor-x,\n.u-vt .u-cursor-y {\n  height: 100%;\n  border-right: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-hz .u-cursor-y,\n.u-vt .u-cursor-x {\n  width: 100%;\n  border-bottom: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-cursor-pt {\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 50%;\n  border: 0 solid;\n  pointer-events: none;\n  will-change: transform;\n  /* Must stay !important: uPlot sets the `background` shorthand inline. */\n  background-clip: padding-box !important;\n}\n\n.u-axis.u-off,\n.u-select.u-off,\n.u-cursor-x.u-off,\n.u-cursor-y.u-off,\n.u-cursor-pt.u-off {\n  display: none;\n}";
+var chart_default = "@charset \"UTF-8\";\n/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--c2-chart--width,100%);\n  height: var(--c2-chart--height,320px);\n  /*\n   * The plot is absolutely positioned, so nothing inside the host contributes intrinsic width. As a flex\n   * item — which is what every example frame in the docs site makes it — the host would otherwise shrink\n   * to its legend, and to nothing at all when there is no legend. `min-width: 0` keeps it able to shrink\n   * below its content when a layout genuinely needs that.\n   */\n  min-width: 0;\n  padding: var(--c2-chart--padding,12px);\n  background: var(--c2-chart--background,#ffffff);\n  color: var(--c2-chart--color,#18181b);\n  font-family: var(--c2-chart--font-family,inherit);\n  font-size: var(--c2-chart--font-size,12px);\n  border-top: var(--c2-chart--border-top,1px solid #e4e4e7);\n  border-right: var(--c2-chart--border-right,1px solid #e4e4e7);\n  border-bottom: var(--c2-chart--border-bottom,1px solid #e4e4e7);\n  border-left: var(--c2-chart--border-left,1px solid #e4e4e7);\n  border-top-left-radius: var(--c2-chart--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-chart--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-chart--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-chart--border-bottom-right-radius,8px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.frame {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/*\n * The plot area is the engine's territory. `contain: strict` plus absolute positioning means the canvas\n * the engine sizes inside it can never feed its own size back into the ResizeObserver watching this box,\n * which is what makes the resize loop structurally impossible rather than merely unlikely.\n */\n.plot-area {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.plot {\n  position: absolute;\n  inset: 0;\n  contain: strict;\n}\n\n/* uPlot has no entry animation. Reveal its already-rendered canvas once, when the adapter becomes ready. */\n:host([data-chart-engine=uplot][animation=auto]) .plot .u-under {\n  animation: c2-chart-plot-reveal 500ms cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n/* Bars enter from their baseline instead of using the line/area chart's horizontal reveal. */\n:host(c2-bar-chart[data-chart-engine=uplot][animation=auto]) .plot .u-under {\n  animation-name: c2-chart-bar-grow;\n  animation-duration: 600ms;\n}\n\n@keyframes c2-chart-plot-reveal {\n  from {\n    clip-path: inset(0 100% 0 0);\n    opacity: 0.65;\n  }\n  to {\n    clip-path: inset(0);\n    opacity: 1;\n  }\n}\n@keyframes c2-chart-bar-grow {\n  from {\n    clip-path: inset(100% 0 0);\n    opacity: 0.65;\n  }\n  to {\n    clip-path: inset(0);\n    opacity: 1;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host([data-chart-engine=uplot][animation=auto]) .plot .u-under,\n  :host(c2-bar-chart[data-chart-engine=uplot][animation=auto]) .plot .u-under {\n    animation: none;\n  }\n}\n.plot canvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  pointer-events: none;\n  will-change: transform;\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-chart__tooltip--gap,6px);\n  padding: var(--c2-chart__tooltip--padding,8px 10px);\n  border-radius: var(--c2-chart__tooltip--border-radius,6px);\n  background: var(--c2-chart__tooltip--background-color,#18181b);\n  color: var(--c2-chart__tooltip--color,#fafafa);\n  font-size: var(--c2-chart__tooltip--font-size,12px);\n  box-shadow: var(--c2-chart__tooltip--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  white-space: nowrap;\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n\n.tooltip-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tooltip-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.tooltip-label {\n  flex: 1 1 auto;\n}\n\n.tooltip-value {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: auto;\n  display: flex;\n  gap: 4px;\n}\n\n.state {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--c2-chart__state--color,#71717a);\n  font-size: var(--c2-chart__state--font-size,14px);\n  background: var(--c2-chart--background,#ffffff);\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--c2-chart__legend--gap,12px);\n  padding: var(--c2-chart__legend--padding,8px 0 0);\n  color: var(--c2-chart__legend--color,#71717a);\n  font-size: var(--c2-chart__legend--font-size,12px);\n}\n\n.legend--start,\n.legend--end {\n  flex-direction: column;\n  align-content: flex-start;\n  flex: 0 0 auto;\n  align-self: center;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* The legend is on an inline edge, so the frame runs as a row. */\n.frame--side {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.legend-item[aria-pressed=false] {\n  opacity: var(--c2-chart__legend__disabled--opacity,0.38);\n}\n\n.legend-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.definitions {\n  display: none;\n}\n\n/*\n * Colour probes. `getComputedStyle().getPropertyValue()` hands back the author's text for a `var()` or\n * `color-mix()` chain, which no canvas engine can parse; the computed `color` of an element always\n * resolves to `rgb(…)`. `display: none` keeps them free.\n */\n.theme-probe {\n  display: none;\n}\n.theme-probe i:nth-child(1) {\n  color: var(--c2-chart__series-1--color,#0265dc);\n}\n.theme-probe i:nth-child(2) {\n  color: var(--c2-chart__series-2--color,#ea580c);\n}\n.theme-probe i:nth-child(3) {\n  color: var(--c2-chart__series-3--color,#0f766e);\n}\n.theme-probe i:nth-child(4) {\n  color: var(--c2-chart__series-4--color,#db2777);\n}\n.theme-probe i:nth-child(5) {\n  color: var(--c2-chart__series-5--color,#a16207);\n}\n.theme-probe i:nth-child(6) {\n  color: var(--c2-chart__series-6--color,#7c3aed);\n}\n.theme-probe i:nth-child(7) {\n  color: var(--c2-chart__series-7--color,#0891b2);\n}\n.theme-probe i:nth-child(8) {\n  color: var(--c2-chart__series-8--color,#52525b);\n}\n.theme-probe i:nth-child(9) {\n  color: var(--c2-chart__axis--color,#71717a);\n}\n.theme-probe i:nth-child(10) {\n  color: var(--c2-chart__grid--color,#e4e4e7);\n}\n.theme-probe i:nth-child(11) {\n  color: var(--c2-chart--color,#18181b);\n}\n.theme-probe i:nth-child(12) {\n  color: var(--c2-chart__muted--color,#71717a);\n}\n.theme-probe i:nth-child(13) {\n  color: var(--c2-chart__tooltip--background-color,#18181b);\n}\n.theme-probe i:nth-child(14) {\n  color: var(--c2-chart__tooltip--color,#fafafa);\n}\n.theme-probe i:nth-child(15) {\n  color: var(--c2-chart__crosshair--color,#a1a1aa);\n}\n.theme-probe i:nth-child(16) {\n  color: var(--c2-chart__positive--color,#16a34a);\n}\n.theme-probe i:nth-child(17) {\n  color: var(--c2-chart__negative--color,#dc2626);\n}\n.theme-probe i:nth-child(18) {\n  color: var(--c2-chart__surface--color,#ffffff);\n}\n\n/*\n * uPlot's structural CSS, hand-ported.\n *\n * `uplot/dist/uPlot.min.css` is a global stylesheet and a shadow root cannot see it, so the rules the\n * engine's DOM depends on live here instead. Only the structural half is kept: the legend and title rules\n * are dropped because this component renders its own. Version-coupled to the `uplot` peer range — re-check\n * after an upgrade.\n */\n.uplot,\n.uplot *,\n.uplot *::before,\n.uplot *::after {\n  box-sizing: border-box;\n}\n\n.uplot {\n  font-family: var(--c2-chart--font-family,inherit);\n  line-height: 1.5;\n  width: min-content;\n}\n\n.u-wrap {\n  position: relative;\n  user-select: none;\n}\n\n.u-over,\n.u-under {\n  position: absolute;\n}\n\n.u-under {\n  overflow: hidden;\n}\n\n.uplot canvas {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.u-axis {\n  position: absolute;\n}\n\n.u-select {\n  position: absolute;\n  pointer-events: none;\n  background: rgba(0, 0, 0, 0.07);\n}\n\n.u-cursor-x,\n.u-cursor-y {\n  position: absolute;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.u-hz .u-cursor-x,\n.u-vt .u-cursor-y {\n  height: 100%;\n  border-right: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-hz .u-cursor-y,\n.u-vt .u-cursor-x {\n  width: 100%;\n  border-bottom: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-cursor-pt {\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 50%;\n  border: 0 solid;\n  pointer-events: none;\n  will-change: transform;\n  /* Must stay !important: uPlot sets the `background` shorthand inline. */\n  background-clip: padding-box !important;\n}\n\n.u-axis.u-off,\n.u-select.u-off,\n.u-cursor-x.u-off,\n.u-cursor-y.u-off,\n.u-cursor-pt.u-off {\n  display: none;\n}";
 //#endregion
 //#region src/chart-base.ts
 /** Properties that only ever move data. A change limited to these takes the fast path. */
@@ -31,6 +32,8 @@ var VIEW_ONLY_KEYS = /* @__PURE__ */ new Set([
 	"lazyRender",
 	"renderTooltip",
 	"renderLegendItem",
+	"hasLinkedLegend",
+	"hasLinkedTooltip",
 	"dataSource"
 ]);
 /** `stats.cpu` -> `Cpu`, `unit_price` -> `Unit price`: a readable label for an inferred field. */
@@ -68,7 +71,9 @@ var RESIZE_EPSILON = 1;
 * @event {CustomEvent<{ engine: string }>} chart-ready - Fired after the engine has loaded and drawn for the first time. The host also gains `data-chart-ready`, which is what a test should wait on.
 * @event {CustomEvent<{ error: unknown }>} chart-error - Fired when the engine fails to load or to draw. `detail.error` is the underlying failure.
 * @event {CustomEvent<ChartPointEventDetail>} point-click - Fired when a datum is clicked. Does not bubble: several components fire point events, so a listener belongs on the element itself.
-* @event {CustomEvent<ChartPointEventDetail>} point-hover - Fired as the pointer moves between data points, and with a `null` detail when it leaves the plot. Does not bubble.
+* @event {CustomEvent<ChartPointEventDetail | null>} point-hover - Fired as the pointer moves between data points, and with a `null` detail when it leaves the plot. Does not bubble.
+* @event {CustomEvent<ChartTooltipContext | null>} tooltip-change - Fired with the complete tooltip model as the pointer moves, and with `null` when it leaves. Used by `c2-chart-tooltip`.
+* @event {CustomEvent<ChartLegendChangeEventDetail>} legend-change - Fired when legend entries or visibility change. Used by `c2-chart-legend`.
 * @event {CustomEvent<ChartRangeEventDetail>} range-change - Fired after the user zooms or brushes. `detail.min` and `detail.max` are the new x bounds. Does not bubble.
 * @event {CustomEvent<ChartSeriesToggleEventDetail>} series-toggle - Fired when a legend entry is toggled. Does not bubble.
 *
@@ -112,6 +117,7 @@ var RESIZE_EPSILON = 1;
 * @cssproperty {pixel} [--c2-chart__line--width=2px] - Stroke width of a line series.
 * @cssproperty {pixel} [--c2-chart__point--radius=2.5px] - Radius of a data point marker.
 * @cssproperty {opacity} [--c2-chart__area--opacity=0.15] - Opacity of the fill under an area series.
+* @cssproperty {number} [--c2-chart__bar--border-radius=0] - Roundedness of a bar's value end, from 0 (square) to 0.5 (fully rounded).
 *
 * @cssproperty {color} [--c2-chart__axis--color=#71717a] - Colour of the axis lines and tick labels.
 * @cssproperty {font-size} [--c2-chart__axis--font-size=12px] - Font size of the tick labels.
@@ -153,7 +159,7 @@ var ChartBase = class extends LitElement {
 		this.xType = "linear";
 		this.legend = "bottom";
 		this.tooltip = "axis";
-		this.animation = "none";
+		this.animation = "auto";
 		this.loading = false;
 		this.error = "";
 		this.emptyMessage = "No data";
@@ -163,6 +169,8 @@ var ChartBase = class extends LitElement {
 		this.hiddenSeries = /* @__PURE__ */ new Set();
 		this.hoverContext = null;
 		this.engineFailed = false;
+		this.hasLinkedLegend = false;
+		this.hasLinkedTooltip = false;
 		this.themeController = new ChartThemeController(this, () => this.handleThemeChange());
 		this.frameBuilder = new ChartFrameBuilder();
 		this.#creating = false;
@@ -175,6 +183,9 @@ var ChartBase = class extends LitElement {
 			height: 0
 		};
 		this.#visible = false;
+		this.#tooltipContext = null;
+		this.#legendPresenters = /* @__PURE__ */ new Set();
+		this.#tooltipPresenters = /* @__PURE__ */ new Set();
 		this.#handleSeriesChange = (event) => {
 			event.stopPropagation();
 			this.#collectSeries();
@@ -194,6 +205,17 @@ var ChartBase = class extends LitElement {
 	#intersectionObserver;
 	#visible;
 	#unsubscribe;
+	#tooltipContext;
+	#legendPresenters;
+	#tooltipPresenters;
+	/** Restores interaction state after an engine instance is created or replaced. */
+	restoreVisibility(adapter) {
+		for (const index of this.hiddenSeries) adapter.setSeriesVisibility(index, false);
+	}
+	/** Whether changing chart data can change the legend model. Pie charts use row labels as entries. */
+	get legendDependsOnData() {
+		return false;
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener(SERIES_CHANGE_EVENT, this.#handleSeriesChange);
@@ -210,6 +232,14 @@ var ChartBase = class extends LitElement {
 			this.#intersectionObserver.observe(this);
 		} else this.#visible = true;
 	}
+	/**
+	* Client-rendered charts connect before Lit creates their plot node. Observe it after the first render as
+	* well, so a chart whose initial layout is zero-sized still draws when its container becomes measurable.
+	*/
+	firstUpdated() {
+		if (this.plotElement) this.#resizeObserver?.observe(this.plotElement);
+		this.themeController.invalidate();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(SERIES_CHANGE_EVENT, this.#handleSeriesChange);
@@ -219,6 +249,7 @@ var ChartBase = class extends LitElement {
 		this.#unsubscribe = void 0;
 		this.adapter?.destroy();
 		this.adapter = void 0;
+		this.removeAttribute("data-chart-engine");
 		this.removeAttribute("data-chart-ready");
 	}
 	/**
@@ -251,6 +282,12 @@ var ChartBase = class extends LitElement {
 		super.updated(changed);
 		if (isServer) return;
 		this.#sync();
+		if (changed.has("tooltip") && this.tooltip === "none") {
+			this.#tooltipContext = null;
+			this.#setHover(null);
+			this.dispatchEvent(new CustomEvent("tooltip-change", { detail: null }));
+		}
+		if ([...changed.keys()].some((key) => key !== "hoverContext")) this.notifyLegendChange();
 	}
 	/**
 	* Replaces the data without going through the update queue. Equivalent to assigning `data`, but skips
@@ -281,6 +318,7 @@ var ChartBase = class extends LitElement {
 		else next.add(index);
 		this.hiddenSeries = next;
 		this.adapter?.setSeriesVisibility(index, visible);
+		this.notifyLegendChange();
 		const series = this.resolvedSeries[index];
 		if (!series) return;
 		this.dispatchEvent(new CustomEvent("series-toggle", { detail: {
@@ -290,6 +328,42 @@ var ChartBase = class extends LitElement {
 			hidden: [...next]
 		} }));
 	}
+	/** Current entries for a linked `c2-chart-legend`. */
+	getLegendItems() {
+		return this.legendItems();
+	}
+	/** Current hover model for a linked `c2-chart-tooltip`. */
+	getTooltipContext() {
+		return this.#tooltipContext;
+	}
+	/** Plot bounds used to place a linked floating tooltip in viewport coordinates. */
+	getPlotBounds() {
+		return (this.plotElement ?? this).getBoundingClientRect();
+	}
+	/** Registers an external legend and suppresses the built-in legend until it disconnects. */
+	registerLegendPresenter(presenter) {
+		this.#legendPresenters.add(presenter);
+		this.hasLinkedLegend = this.#legendPresenters.size > 0;
+	}
+	/** Removes an external legend registration. */
+	unregisterLegendPresenter(presenter) {
+		this.#legendPresenters.delete(presenter);
+		this.hasLinkedLegend = this.#legendPresenters.size > 0;
+	}
+	/** Registers an external tooltip and suppresses the built-in tooltip until it disconnects. */
+	registerTooltipPresenter(presenter) {
+		this.#tooltipPresenters.add(presenter);
+		this.hasLinkedTooltip = this.#tooltipPresenters.size > 0;
+	}
+	/** Removes an external tooltip registration. */
+	unregisterTooltipPresenter(presenter) {
+		this.#tooltipPresenters.delete(presenter);
+		this.hasLinkedTooltip = this.#tooltipPresenters.size > 0;
+	}
+	/** Notifies linked legends after a subclass changes a data-shaped legend such as pie slices. */
+	notifyLegendChange() {
+		this.dispatchEvent(new CustomEvent("legend-change", { detail: { items: this.getLegendItems() } }));
+	}
 	/** The series in draw order: `c2-chart-series` children when present, otherwise the `series` property. */
 	get resolvedSeries() {
 		if (this.seriesElements.length > 0) return this.seriesElements.filter((element) => !element.hidden).map((element) => element.toConfig());
@@ -359,13 +433,17 @@ var ChartBase = class extends LitElement {
 			await this.#createChart();
 			return;
 		}
+		let restoreAfterData = false;
 		if (this.#optionsDirty) {
 			this.#optionsDirty = false;
-			this.adapter.setOptions(this.buildOptions(this.buildContext()), this.#optionsMode);
+			const mode = this.#optionsMode;
+			this.adapter.setOptions(this.buildOptions(this.buildContext()), mode);
 			this.#optionsMode = "merge";
+			restoreAfterData = mode === "replace";
 			this.#dataDirty = true;
 		}
 		if (this.#dataDirty) this.#flushData();
+		if (restoreAfterData) this.restoreVisibility(this.adapter);
 	}
 	async #createChart() {
 		if (this.#creating || !this.plotElement || !this.frame) return;
@@ -385,7 +463,8 @@ var ChartBase = class extends LitElement {
 			this.adapter = adapter;
 			this.#optionsDirty = false;
 			this.#dataDirty = false;
-			for (const index of this.hiddenSeries) adapter.setSeriesVisibility(index, false);
+			this.restoreVisibility(adapter);
+			this.setAttribute("data-chart-engine", this.engineName);
 			this.setAttribute("data-chart-ready", "true");
 			this.dispatchEvent(new CustomEvent("chart-ready", { detail: { engine: this.engineName } }));
 		} catch (error) {
@@ -402,6 +481,7 @@ var ChartBase = class extends LitElement {
 		if (this.#appended > 0 && this.adapter.appendData) this.adapter.appendData(projected, this.#appended);
 		else this.adapter.setData(projected);
 		this.#appended = 0;
+		if (this.legendDependsOnData) this.notifyLegendChange();
 	}
 	#handleResize(entries) {
 		const rect = entries[entries.length - 1]?.contentRect;
@@ -451,12 +531,18 @@ var ChartBase = class extends LitElement {
 		} else this.#unsubscribe = () => controller.abort();
 	}
 	#handleHover(detail) {
-		if (!detail || !this.frame || this.tooltip === "none") {
+		if (!detail || !this.frame) {
+			this.#tooltipContext = null;
 			this.#setHover(null);
+			this.dispatchEvent(new CustomEvent("tooltip-change", { detail: null }));
+			this.dispatchEvent(new CustomEvent("point-hover", { detail: null }));
 			return;
 		}
 		const context = this.#tooltipContextAt(detail);
-		this.#setHover(context);
+		const tooltipContext = this.tooltip === "none" ? null : context;
+		this.#tooltipContext = tooltipContext;
+		this.#setHover(this.hasLinkedTooltip ? null : tooltipContext);
+		this.dispatchEvent(new CustomEvent("tooltip-change", { detail: tooltipContext }));
 		const point = this.#pointAt(detail.index, detail.seriesIndex);
 		if (point) this.dispatchEvent(new CustomEvent("point-hover", { detail: point }));
 	}
@@ -468,7 +554,7 @@ var ChartBase = class extends LitElement {
 	#setHover(context) {
 		const previous = this.hoverContext;
 		if (context && this.tooltipElement) this.tooltipElement.style.transform = `translate(${context.px}px, ${context.py}px)`;
-		if (previous && context && previous.index === context.index) return;
+		if (previous && context && previous.index === context.index && (this.tooltip !== "item" || previous.entries[0]?.seriesIndex === context.entries[0]?.seriesIndex)) return;
 		this.hoverContext = context;
 	}
 	#tooltipContextAt(detail) {
@@ -541,8 +627,8 @@ var ChartBase = class extends LitElement {
 		return new Intl.NumberFormat(this.locale, { maximumFractionDigits: 2 }).format(value);
 	}
 	render() {
-		const legendBefore = this.legend === "top" || this.legend === "start";
-		const legendAfter = this.legend === "bottom" || this.legend === "end";
+		const legendBefore = !this.hasLinkedLegend && (this.legend === "top" || this.legend === "start");
+		const legendAfter = !this.hasLinkedLegend && (this.legend === "bottom" || this.legend === "end");
 		const side = this.legend === "start" || this.legend === "end";
 		return html`
       <div class="frame ${side ? "frame--side" : ""}" part="frame">
@@ -551,7 +637,9 @@ var ChartBase = class extends LitElement {
           <!-- No bindings inside: Lit never patches this node, so the engine's canvas survives updates. -->
           <div class="plot" part="plot"></div>
           <div class="overlay" part="overlay">
-            <div class="tooltip" part="tooltip" role="tooltip" ?hidden=${!this.hoverContext || this.tooltip === "none"}>${this.renderTooltipBody()}</div>
+            <div class="tooltip" part="tooltip" role="tooltip" ?hidden=${!this.hoverContext || this.tooltip === "none" || this.hasLinkedTooltip}>
+              ${this.renderTooltipBody()}
+            </div>
             <div class="actions" part="actions"><slot name="actions"></slot></div>
           </div>
           ${this.renderState()}
@@ -637,7 +725,10 @@ __decorate([property({
 })], ChartBase.prototype, "xType", void 0);
 __decorate([property({ type: String })], ChartBase.prototype, "legend", void 0);
 __decorate([property({ type: String })], ChartBase.prototype, "tooltip", void 0);
-__decorate([property({ type: String })], ChartBase.prototype, "animation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ChartBase.prototype, "animation", void 0);
 __decorate([property({ type: String })], ChartBase.prototype, "locale", void 0);
 __decorate([property({
 	type: Boolean,
@@ -662,5 +753,7 @@ __decorate([state()], ChartBase.prototype, "seriesElements", void 0);
 __decorate([state()], ChartBase.prototype, "hiddenSeries", void 0);
 __decorate([state()], ChartBase.prototype, "hoverContext", void 0);
 __decorate([state()], ChartBase.prototype, "engineFailed", void 0);
+__decorate([state()], ChartBase.prototype, "hasLinkedLegend", void 0);
+__decorate([state()], ChartBase.prototype, "hasLinkedTooltip", void 0);
 //#endregion
 export { chart_default as n, ChartBase as t };

package/dist/chart-base.js

@@ -1,2 +1,2 @@
-import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+import { t as ChartBase } from "./chart-base-CEZvMKwW.js";
 export { ChartBase };

package/dist/chart-legend-DJE3HO7C.js

@@ -0,0 +1,49 @@
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { t as ChartLinkedElement } from "./chart-link-C9vN9Y6c.js";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { html, unsafeCSS } from "lit";
+//#region src/chart-legend.scss?inline
+var chart_legend_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--c2-chart__legend--gap,12px);\n  padding: var(--c2-chart__legend--padding,0);\n  color: var(--c2-chart__legend--color,#71717a);\n  font-size: var(--c2-chart__legend--font-size,12px);\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.item[aria-pressed=false] {\n  opacity: var(--c2-chart__legend__disabled--opacity,0.38);\n}\n\n.marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}";
+//#endregion
+//#region src/chart-legend.ts
+var ChartLegend = class ChartLegend extends ChartLinkedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.#handleLegendChange = (event) => {
+			this.items = event.detail.items;
+		};
+	}
+	static {
+		this.styles = unsafeCSS(chart_legend_default);
+	}
+	#handleLegendChange;
+	chartConnected(chart) {
+		chart.registerLegendPresenter(this);
+		chart.addEventListener("legend-change", this.#handleLegendChange);
+		this.items = chart.getLegendItems();
+	}
+	chartDisconnected(chart) {
+		chart.removeEventListener("legend-change", this.#handleLegendChange);
+		chart.unregisterLegendPresenter(this);
+		this.items = [];
+	}
+	render() {
+		const content = this.renderLegend?.(this.items) ?? this.items.map((item) => html`
+          <button class="item" part="item" type="button" aria-pressed=${item.visible ? "true" : "false"} @click=${() => item.toggle()}>
+            ${this.renderLegendItem?.(item) ?? html`
+                <span class="marker" part="marker" style="background:${item.color}"></span>
+                <span>${item.label}</span>
+              `}
+          </button>
+        `);
+		return html`<slot>${content}</slot>`;
+	}
+};
+__decorate([property({ attribute: false })], ChartLegend.prototype, "renderLegend", void 0);
+__decorate([property({ attribute: false })], ChartLegend.prototype, "renderLegendItem", void 0);
+__decorate([state()], ChartLegend.prototype, "items", void 0);
+ChartLegend = __decorate([customElement("c2-chart-legend")], ChartLegend);
+//#endregion
+export { ChartLegend as t };

package/dist/chart-legend.js

@@ -0,0 +1,2 @@
+import { t as ChartLegend } from "./chart-legend-DJE3HO7C.js";
+export { ChartLegend };