@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/chart/parts.ts

@@ -0,0 +1,237 @@
+import { gsap, EASE } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import type { Scope } from '../../core/scope';
+
+/*
+ * The parts the round and flow charts (pie, radar, radial, sankey, heatmap)
+ * share with chart: the same plot, inverse-glass tooltip, outlined legend,
+ * screen-reader table and colour slots, so they read as one family and use
+ * chart.css. Each chart draws its own marks.
+ */
+
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const SLOTS = 8;
+
+export const svg = <K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string | number> = {}) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
+  return element;
+};
+export const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+export const round = (n: number) => Math.round(n * 100) / 100;
+
+/** The colour of slot `i`: monochrome alone, --mk-chart-N for up to 8, a neutral past them. */
+export const slotColor = (i: number, total = SLOTS) => (total === 1 ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)');
+
+export const formatNumber = (value: number) => new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+
+/** A point on a circle: angle 0 is 12 o'clock, clockwise. */
+export const polar = (cx: number, cy: number, r: number, angle: number) => [cx + r * Math.sin(angle), cy - r * Math.cos(angle)] as const;
+
+/** An annular sector (a pie slice when `inner` is 0) from angle `a0` to `a1`. */
+export function arcPath(cx: number, cy: number, outer: number, inner: number, a0: number, a1: number) {
+  const sweep = Math.min(a1 - a0, Math.PI * 2 - 1e-4);
+  const end = a0 + sweep;
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, a0);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  if (inner <= 0) return `M${round(cx)},${round(cy)}L${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}Z`;
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, a0);
+  return `M${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}L${round(x2)},${round(y2)}A${round(inner)},${round(inner)} 0 ${large} 0 ${round(x3)},${round(y3)}Z`;
+}
+
+export interface TipRow {
+  name: string;
+  color?: string;
+  value: string;
+}
+
+export interface ChartFrame {
+  plot: HTMLDivElement;
+  canvas: SVGSVGElement;
+  tooltip: HTMLDivElement;
+  empty: HTMLParagraphElement;
+  legend: HTMLUListElement;
+  table: HTMLTableElement;
+  live: HTMLSpanElement;
+  /** Fill and show the tooltip near (x, y) in plot px; null hides it. */
+  tip(at: { x: number; y: number; title: string; rows: TipRow[] } | null): void;
+  /** One outlined pill per item; `type` picks the swatch's shape. */
+  fillLegend(items: Array<{ name: string; color: string }>, show: boolean, type?: string): HTMLLIElement[];
+  /** The values for screen readers: a caption, the column heads and the rows. */
+  fillTable(caption: string, head: string[], rows: string[][]): void;
+  keep(animation: gsap.core.Animation | null | undefined): void;
+}
+
+/** The plot, tooltip, legend and table of a chart, removed by the scope. The root gets .mk-chart for chart.css. */
+export function chartFrame(root: HTMLElement, scope: Scope, kind: string): ChartFrame {
+  if (!root.classList.contains('mk-chart')) {
+    root.classList.add('mk-chart');
+    scope.add(() => {
+      root.classList.remove('mk-chart');
+      if (!root.classList.length) root.removeAttribute('class');
+    });
+  }
+  scope.attr(root, 'data-mk-chart-type', kind);
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, parent: Element = root) => {
+    const element = document.createElement(tag);
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const plot = made('div');
+  plot.dataset.mkChartPlot = '';
+  const canvas = svg('svg');
+  canvas.dataset.mkChartSvg = '';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('tabindex', '0');
+  canvas.setAttribute('focusable', 'true');
+  plot.append(canvas);
+  const tooltip = made('div', plot);
+  tooltip.dataset.mkChartTooltip = '';
+  tooltip.setAttribute('aria-hidden', 'true');
+  tooltip.hidden = true;
+  const empty = made('p');
+  empty.dataset.mkChartEmpty = '';
+  empty.hidden = true;
+  const legend = made('ul');
+  legend.dataset.mkChartLegend = '';
+  const table = made('table');
+  table.dataset.mkChartTable = '';
+  table.className = 'mk-sr-only';
+  const live = made('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  scope.attr(root, 'data-mk-ready', '');
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null | undefined) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf(tooltip);
+  });
+
+  const tip: ChartFrame['tip'] = (at) => {
+    if (!at) {
+      if (!tooltip.hidden && !reduced()) {
+        gsap.killTweensOf(tooltip, 'opacity,scale');
+        keep(gsap.to(tooltip, { opacity: 0, scale: 0.94, duration: 0.15, ease: 'power2.in', onComplete: () => {
+          tooltip.hidden = true;
+        } }));
+      } else tooltip.hidden = true;
+      return;
+    }
+    tooltip.replaceChildren();
+    const title = document.createElement('strong');
+    title.textContent = at.title;
+    tooltip.append(title);
+    for (const each of at.rows) {
+      const row = document.createElement('span');
+      row.dataset.mkChartRow = '';
+      const swatch = document.createElement('i');
+      if (!each.color || /--mk-(text|chart-mono|muted)/.test(each.color)) swatch.dataset.mkMono = '';
+      else swatch.style.background = each.color;
+      const name = document.createElement('span');
+      name.textContent = each.name;
+      const amount = document.createElement('b');
+      amount.textContent = each.value;
+      row.append(swatch, name, amount);
+      tooltip.append(row);
+    }
+    const appearing = tooltip.hidden;
+    tooltip.hidden = false;
+    const width = plot.clientWidth || 300;
+    const height = plot.clientHeight || 240;
+    const tipW = tooltip.offsetWidth || 160;
+    const tipH = tooltip.offsetHeight || 60;
+    // Beside the point, towards the middle of the plot, inside it.
+    const left = round(Math.max(0, Math.min(width - tipW, at.x > width / 2 ? at.x - 16 - tipW : at.x + 16)));
+    const top = round(Math.max(0, Math.min(height - tipH, at.y - tipH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tooltip);
+      gsap.set(tooltip, { x: left, y: top });
+      if (!reduced()) keep(gsap.fromTo(tooltip, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.25, ease: EASE.pop }));
+      else gsap.set(tooltip, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(tooltip, 'opacity,scale');
+      gsap.set(tooltip, { opacity: 1, scale: 1 });
+      keep(gsap.to(tooltip, { x: left, y: top, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    }
+  };
+
+  const fillLegend: ChartFrame['fillLegend'] = (items, show, type = 'bar') => {
+    legend.replaceChildren();
+    legend.hidden = !show || !items.length;
+    if (legend.hidden) return [];
+    return items.map((item) => {
+      const li = document.createElement('li');
+      const swatch = document.createElement('span');
+      swatch.dataset.mkChartSwatch = '';
+      swatch.dataset.mkType = type;
+      swatch.style.background = item.color;
+      swatch.style.color = item.color;
+      swatch.setAttribute('aria-hidden', 'true');
+      const name = document.createElement('span');
+      name.textContent = item.name;
+      li.append(swatch, name);
+      legend.append(li);
+      return li;
+    });
+  };
+
+  const fillTable: ChartFrame['fillTable'] = (caption, head, rows) => {
+    table.replaceChildren();
+    const cap = document.createElement('caption');
+    cap.textContent = caption;
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const text of head) {
+      const th = document.createElement('th');
+      th.scope = 'col';
+      th.textContent = text;
+      headRow.append(th);
+    }
+    thead.append(headRow);
+    const body = document.createElement('tbody');
+    for (const cells of rows) {
+      const row = document.createElement('tr');
+      cells.forEach((text, i) => {
+        const cell = document.createElement(i ? 'td' : 'th');
+        if (!i) (cell as HTMLTableCellElement).scope = 'row';
+        cell.textContent = text;
+        row.append(cell);
+      });
+      body.append(row);
+    }
+    table.append(cap, thead, body);
+  };
+
+  return { plot, canvas, tooltip, empty, legend, table, live, tip, fillLegend, fillTable, keep };
+}
+
+/** Calls `draw` again when the root changes width (on the next frame, once). */
+export function onWidth(root: HTMLElement, scope: Scope, draw: () => void) {
+  if (typeof ResizeObserver !== 'function') return;
+  let width = 0;
+  let frame = 0;
+  const observer = scope.observe(
+    new ResizeObserver(() => {
+      const next = Math.round(root.clientWidth);
+      if (!next || next === width) return;
+      const first = !width;
+      width = next;
+      if (first) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(draw);
+    }),
+  );
+  observer.observe(root);
+  scope.add(() => cancelAnimationFrame(frame));
+}

package/src/components/chart/react.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createChart, type ChartInstance, type ChartOptions } from './engine';
+
+export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, ChartOptions {
+  instanceRef?: { current: ChartInstance | null };
+}
+
+/**
+ * <Chart type="bar" stacked labels={weeks} series={[{ name: 'Ana', values }]} formatValue={money} label="Sesiones por semana" />.
+ * Data changes redraw in place; the selection survives when its point still exists.
+ */
+export function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }: ChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ChartInstance | null>(null);
+  const format = useLatest(formatValue);
+  const select = useLatest(onSelect);
+  const formatted = formatValue !== undefined;
+  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip, axis, endLabel };
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = (): ChartOptions => ({
+    ...latest.current,
+    formatValue: formatted ? (value) => format.current?.(value) ?? String(value) : undefined,
+    onSelect: (index) => select.current?.(index),
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createChart(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // Created once; data is pushed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, formatted]);
+  return <div {...props} ref={ref} className={['mk-chart', className].filter(Boolean).join(' ')} />;
+}

package/src/components/chart/use-chart.ts

@@ -0,0 +1,55 @@
+'use client';
+import { useRef, type RefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import type { Instance } from '../../core/types';
+
+interface Updatable<O> extends Instance {
+  update(options: O): void;
+}
+
+/**
+ * The React side of the round and flow charts: the engine is created once and
+ * data changes are pushed with update(), so the chart glides instead of being
+ * drawn again. `data` is compared as JSON; callbacks always call the latest.
+ */
+export function useChart<O extends object, I extends Updatable<O>>(
+  create: (root: HTMLElement | null, options: O) => I,
+  data: O,
+  callbacks: { formatValue?: (value: number) => string; onSelect?: (...args: never[]) => void },
+  instanceRef?: { current: I | null },
+): RefObject<HTMLDivElement | null> {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<I | null>(null);
+  const format = useLatest(callbacks.formatValue);
+  const select = useLatest(callbacks.onSelect);
+  const formatted = callbacks.formatValue !== undefined;
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = (): O => ({
+    ...latest.current,
+    formatValue: formatted ? (value: number) => format.current?.(value) ?? String(value) : undefined,
+    onSelect: (...args: never[]) => (select.current as ((...a: never[]) => void) | undefined)?.(...args),
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = create(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // Created once; data is pushed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, formatted]);
+  return ref;
+}

package/src/components/chart-tooltip/README.md

@@ -0,0 +1,53 @@
+# chart-tooltip
+
+Tooltip avanzado para gráficas. Sobre la `chart` de motion-kit (creada con `tooltip: false`) sigue la selección de la propia gráfica, que le pasa el punto, cada serie y su valor anterior por `mk:select`, y deja la guía y los marcadores a la gráfica. Sobre cualquier otra gráfica sigue al puntero por `labels` (de borde a borde en líneas, en el centro de cada hueco en barras, dentro de `inset`) y dibuja una guía punteada y, con `min`/`max`, un marcador por serie. El teclado también la mueve (flechas, Inicio, Fin, Escape).
+
+La tarjeta es el cristal invertido de Melon Mind: la etiqueta y una fila por serie con su valor, la variación respecto al punto anterior (▲ ▼ %) y, si lo pides, su parte del total, más una fila de total. Aparece con un pop (.25 s), se desliza entre puntos hacia el lado con espacio y los valores que cambian ruedan en su dirección. Un clic la fija: se queda aunque el puntero salga (el pin aparece con un giro); otro clic o Escape la suelta.
+
+## HTML / Astro
+
+```html
+<mk-chart-tooltip class="mk-chart-tooltip" share>
+  <mk-chart class="mk-chart" type="line" tooltip="false" labels="Ene,Feb,Mar"
+    series='[{"name":"Ingresos","values":[120,150,140]},{"name":"Gastos","values":[80,95,70]}]'></mk-chart>
+</mk-chart-tooltip>
+
+<!-- Sobre otra gráfica (SVG o canvas propios): -->
+<mk-chart-tooltip labels="L,M,X,J,V" series='[{"name":"Visitas","values":[4,6,5,8,7]}]'
+  inset='{"left":40,"right":16,"top":12,"bottom":28}' min="0" max="10">
+  <canvas id="grafica"></canvas>
+</mk-chart-tooltip>
+```
+
+## React
+
+```tsx
+<ChartTooltip share total>
+  <Chart type="bar" labels={weeks} series={teams} tooltip={false} />
+</ChartTooltip>
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `labels`, `series` | `labels`, `series` (JSON) | — | Datos, en modo independiente (`{ name, values, color? }`). |
+| `align` | `align` | `'edge'` | `edge` (líneas) o `center` (barras). |
+| `inset` | `inset` (JSON) | 0 | Margen del área de la gráfica dentro del contenedor, en px. |
+| `min`, `max` | `min`, `max` | — | Escala vertical: con ella se dibujan marcadores. |
+| `formatValue(n)` | — | 2 decimales | Formato de los valores. |
+| `delta` | `delta` | `true` | Variación respecto al punto anterior. |
+| `share` | `share` | `false` | Parte del total de cada fila. |
+| `total` | `total` | con 2+ series | Fila de total. |
+| `sort` | `sort` | `false` | Filas de mayor a menor. |
+| `pin` | `pin` | `true` | Un clic fija la tarjeta. |
+| `label` | `label` | `'Gráfica'` | Nombre accesible en modo independiente. |
+| `onIndexChange(index)` | — | — | Al cambiar de punto. |
+
+## API y eventos
+
+`show(i)`, `hide()`, `update(options)`, `index`, `pinned`, `destroy()`. Evento `mk:index-change` con `{ index, pinned }`.
+
+## Accesibilidad
+
+Sobre `chart`, la tabla y los anuncios son los de la gráfica. En modo independiente el contenedor es enfocable y un estado discreto anuncia cada punto al moverse con el teclado. Con movimiento reducido no hay pop ni deslizamientos.

package/src/components/chart-tooltip/chart-tooltip.css

@@ -0,0 +1,167 @@
+/* chart-tooltip — an overlay on the chart it wraps: a dotted guide, 10 px markers ringed in the surface colour and
+   a 12 px card in Melon Mind's inverse glass (label, rows with a swatch, value, change and share, a total). */
+.mk-chart-tooltip,
+mk-chart-tooltip {
+  /* The chart palette (same as chart.css), so series over any chart get their colours without it. */
+  --mk-chart-mono: var(--mk-text);
+  --mk-chart-1: #2a78d6;
+  --mk-chart-2: #eb6834;
+  --mk-chart-3: #1baf7a;
+  --mk-chart-4: #eda100;
+  --mk-chart-5: #e87ba4;
+  --mk-chart-6: #008300;
+  --mk-chart-7: #6250d6;
+  --mk-chart-8: #e34948;
+  position: relative;
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode='light'])) :is(.mk-chart-tooltip, mk-chart-tooltip) {
+    --mk-chart-1: #3987e5;
+    --mk-chart-2: #d95926;
+    --mk-chart-3: #199e70;
+    --mk-chart-4: #c98500;
+    --mk-chart-5: #d55181;
+    --mk-chart-6: #008300;
+    --mk-chart-7: #9085e9;
+    --mk-chart-8: #e66767;
+  }
+}
+
+:where(:root[data-mk-mode='dark']) :is(.mk-chart-tooltip, mk-chart-tooltip) {
+  --mk-chart-1: #3987e5;
+  --mk-chart-2: #d95926;
+  --mk-chart-3: #199e70;
+  --mk-chart-4: #c98500;
+  --mk-chart-5: #d55181;
+  --mk-chart-6: #008300;
+  --mk-chart-7: #9085e9;
+  --mk-chart-8: #e66767;
+}
+
+:is(.mk-chart-tooltip, mk-chart-tooltip):focus-visible {
+  border-radius: 12px;
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 4px;
+}
+
+[data-mk-ct-layer] {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+[data-mk-ct-guide] {
+  position: absolute;
+  left: 0;
+  width: 0;
+  border-left: 1.5px dotted var(--mk-muted);
+}
+
+[data-mk-ct-marker] {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2.5px var(--mk-surface-1);
+}
+
+[data-mk-ct-card] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-width: 11rem;
+  max-width: min(18rem, calc(100% - 8px));
+  padding: 0.65rem 0.8rem;
+  border-radius: 12px;
+  background: var(--mk-glass-inverse, rgb(24 24 24 / 0.9));
+  color: var(--mk-on-glass-inverse, #fff);
+  box-shadow: var(--mk-glass-bevel, 0 12px 32px -12px rgb(0 0 0 / 0.4));
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+[data-mk-ct-card][hidden],
+[data-mk-ct-guide][hidden],
+[data-mk-ct-marker][hidden],
+[data-mk-ct-pin][hidden],
+[data-mk-ct-delta][hidden] {
+  display: none;
+}
+
+[data-mk-ct-head] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-mk-ct-title] {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-ct-pin] {
+  display: inline-grid;
+  place-items: center;
+  opacity: 0.8;
+}
+
+[data-mk-ct-rows] {
+  display: grid;
+  gap: 0.3rem;
+}
+
+[data-mk-ct-row] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+[data-mk-ct-swatch] {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 3px;
+}
+
+[data-mk-ct-swatch][data-mk-mono] {
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+[data-mk-ct-name] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-ct-value] {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: end;
+}
+
+[data-mk-ct-delta] {
+  grid-column: 2 / -1;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.78;
+}
+
+[data-mk-ct-row='total'] {
+  padding-top: 0.3rem;
+  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+}

package/src/components/chart-tooltip/element.ts

@@ -0,0 +1,37 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createChartTooltip, type ChartTooltipInstance } from './engine';
+
+/**
+ * <mk-chart-tooltip class="mk-chart-tooltip" share total>
+ *   <mk-chart class="mk-chart" tooltip="false" …></mk-chart>
+ * </mk-chart-tooltip>
+ * Over another chart give it labels, series (JSON), align, inset (JSON), min and max.
+ * Emits mk:index-change ({index, pinned}).
+ */
+export class MkChartTooltipElement extends MkElement<ChartTooltipInstance> {
+  static options: Record<string, OptionType> = {
+    labels: 'list',
+    series: 'json',
+    align: 'string',
+    inset: 'json',
+    min: 'number',
+    max: 'number',
+    delta: 'boolean',
+    share: 'boolean',
+    total: 'boolean',
+    sort: 'boolean',
+    pin: 'boolean',
+    label: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createChartTooltip(this, options);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update(this.options);
+  }
+}
+
+export const defineChartTooltip = () => defineElement('mk-chart-tooltip', MkChartTooltipElement);