@yewdiel21/motion-kit 0.14.0 → 0.15.0

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

@@ -0,0 +1,48 @@
+# radial-chart
+
+Totales en anillos concéntricos o medidor con extremos redondeados y avance animado.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { RadialChart } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add radial-chart --react --elements
+```
+
+## React
+
+```tsx
+<RadialChart data={[{ label: "Crear", value: 72, max: 100 }, { label: "Aprender", value: 56, max: 100 }]} sweep={270} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-radial-chart max="100" data='[{"label":"Crear","value":72},{"label":"Aprender","value":56}]'></mk-radial-chart>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-radial-chart']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createRadialChart } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+data: {label, value, max?, color?}[]. max: mayor valor si no se indica una meta. sweep: 360 grados (270 para gauge). size: 240 px. thickness: automático hasta 16 px. totalLabel: Total. legend: true.
+
+Todos los gráficos aceptan `label`, `emptyLabel` y `formatValue`. Se actualizan con `update(options)` sin desmontarse; `select(index | null)` y `selected` controlan la selección (en heatmap se usa una fecha). `onSelect` también emite `mk:select`.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-chart-1…8, --mk-chart-surface.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

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

@@ -0,0 +1,30 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createRadialChart, type RadialChartInstance, type RadialChartOptions } from './engine';
+
+/**
+ * <mk-radial-chart class="mk-chart mk-radial-chart" label="Metas del día"
+ *   data='[{"label":"Pasos","value":7400,"max":10000},{"label":"Agua","value":5,"max":8}]'></mk-radial-chart>
+ * sweep="270" draws a gauge. Attribute changes glide in place. Emits mk:select ({index, label, value}).
+ */
+export class MkRadialChartElement extends MkElement<RadialChartInstance> {
+  static options: Record<string, OptionType> = { data: 'json', max: 'number', sweep: 'number', size: 'number', thickness: 'number', label: 'string', totalLabel: 'string', legend: 'boolean', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createRadialChart(this, options as RadialChartOptions);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update({ legend: undefined, max: undefined, ...(this.options as RadialChartOptions) });
+  }
+
+  update(options: RadialChartOptions) {
+    this.instance?.update(options);
+  }
+
+  select(index: number | null) {
+    this.instance?.select(index);
+  }
+}
+
+export const defineRadialChart = () => defineElement('mk-radial-chart', MkRadialChartElement);

package/src/components/radial-chart/engine.ts

@@ -0,0 +1,290 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { blurIn, rollDigits } from '../../motion/micro';
+import { chartFrame, finite, formatNumber, onWidth, polar, round, slotColor, svg } from '../chart/parts';
+
+/*
+ * Radial chart: totals as rings, one inside the other, each filling its track
+ * from 12 o'clock with round ends (or a 270° gauge), in chart's family. The
+ * rings sweep in on the swatch curve (.38,.49,0,1.5), 80 ms apart from the
+ * outside in, while the middle rolls up to the total; new data glides each
+ * ring. Pointing at a ring (its legend pill, or the arrows) thickens it, dims
+ * the rest and the middle says its value and how much of its goal it is.
+ */
+
+export interface RadialDatum {
+  label: string;
+  value: number;
+  /** This ring's goal (default: the chart's max). */
+  max?: number;
+  color?: string;
+}
+
+export interface RadialChartOptions {
+  /** Rings from the outside in. */
+  data?: RadialDatum[];
+  /** What a full ring is worth (default: the largest value). */
+  max?: number;
+  /** Degrees a full ring covers (default 360; 270 makes a gauge). */
+  sweep?: number;
+  /** Diameter in px (default 240). */
+  size?: number;
+  /** Ring thickness in px (default: what fits, up to 16). */
+  thickness?: number;
+  label?: string;
+  /** The middle when nothing is chosen (default 'Total'). */
+  totalLabel?: string;
+  legend?: boolean;
+  formatValue?: (value: number) => string;
+  emptyLabel?: string;
+  onSelect?: (index: number | null) => void;
+}
+
+export interface RadialChartInstance extends Instance {
+  update(options: RadialChartOptions): void;
+  select(index: number | null): void;
+  readonly selected: number | null;
+}
+
+/** A stroked arc on a circle from `a0` to `a1` (radians, 0 at the top, clockwise). */
+function strokeArc(cx: number, cy: number, r: number, a0: number, a1: number) {
+  const end = a0 + Math.min(a1 - a0, Math.PI * 2 - 1e-3);
+  const [x0, y0] = polar(cx, cy, r, a0);
+  const [x1, y1] = polar(cx, cy, r, end);
+  return `M${round(x0)},${round(y0)}A${round(r)},${round(r)} 0 ${end - a0 > Math.PI ? 1 : 0} 1 ${round(x1)},${round(y1)}`;
+}
+
+export function createRadialChart(root: HTMLElement | null, initial: RadialChartOptions = {}): RadialChartInstance {
+  if (!root) return inert({ update() {}, select() {}, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, 'radial');
+  const { plot, canvas, keep } = frame;
+  let options: RadialChartOptions = { ...initial };
+  let selected: number | null = null;
+
+  const center = document.createElement('div');
+  center.dataset.mkRadialCenter = '';
+  center.setAttribute('aria-hidden', 'true');
+  const centerValue = document.createElement('strong');
+  const centerLabel = document.createElement('span');
+  center.append(centerValue, centerLabel);
+  plot.append(center);
+  scope.add(() => center.remove());
+
+  const format = (value: number) => (options.formatValue ? options.formatValue(value) : formatNumber(value));
+  const modelOf = () => {
+    const data = (options.data ?? []).filter((datum) => finite(datum.value));
+    const top = Math.max(0, ...data.map((datum) => datum.value));
+    return data.map((datum, i) => ({
+      label: String(datum.label),
+      value: Math.max(0, datum.value),
+      max: finite(datum.max) && datum.max > 0 ? datum.max : finite(options.max) && options.max > 0 ? options.max : top || 1,
+      color: datum.color ?? slotColor(i, Math.max(2, data.length)),
+    }));
+  };
+  let model = modelOf();
+  const total = () => model.reduce((sum, ring) => sum + ring.value, 0);
+  const percent = (ring: { value: number; max: number }) => new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 0 }).format(ring.value / ring.max);
+  const sweep = () => (Math.min(360, Math.max(90, finite(options.sweep) ? options.sweep : 360)) * Math.PI) / 180;
+  const startAngle = () => -sweep() / 2 + (sweep() >= Math.PI * 2 - 1e-6 ? Math.PI : 0);
+
+  let geometry = { size: 240, cx: 120, cy: 120, radii: [] as number[], thickness: 12 };
+  let arcs: SVGPathElement[] = [];
+  let tracks: SVGPathElement[] = [];
+  let shown: number[] = [];
+  let glide: gsap.core.Tween | null = null;
+  scope.add(() => glide?.kill());
+
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite(options.size) ? options.size : 240;
+    const size = Math.max(120, width ? Math.min(wanted, width) : wanted);
+    const n = Math.max(1, model.length);
+    const outer = size / 2 - 4;
+    // Rings share the outer 60 % of the radius, a quarter of a ring apart.
+    const fit = (outer * 0.6) / (n + (n - 1) * 0.35);
+    const thickness = finite(options.thickness) ? options.thickness : Math.max(4, Math.min(16, fit));
+    const spacing = thickness * 1.35;
+    geometry = { size, cx: size / 2, cy: size / 2, thickness, radii: model.map((_, i) => outer - thickness / 2 - i * spacing) };
+    canvas.setAttribute('viewBox', `0 0 ${size} ${size}`);
+    canvas.setAttribute('width', String(size));
+    canvas.setAttribute('height', String(size));
+    plot.style.setProperty('--mk-radial-size', `${size}px`);
+    plot.style.setProperty('--mk-radial-thickness', `${thickness}px`);
+  };
+  scope.add(() => {
+    plot.style.removeProperty('--mk-radial-size');
+    plot.style.removeProperty('--mk-radial-thickness');
+  });
+
+  const build = () => {
+    canvas.replaceChildren();
+    const { cx, cy, radii } = geometry;
+    const a0 = startAngle();
+    const back = svg('g', { 'data-mk-part': 'tracks' });
+    const front = svg('g', { 'data-mk-part': 'series' });
+    tracks = model.map((_, i) => {
+      const track = svg('path', { d: strokeArc(cx, cy, radii[i]!, a0, a0 + sweep()), 'data-mk-index': i });
+      back.append(track);
+      return track;
+    });
+    arcs = model.map((ring, i) => {
+      const arc = svg('path', { 'data-mk-index': i, 'data-mk-part': 'ring' });
+      arc.style.stroke = ring.color;
+      front.append(arc);
+      return arc;
+    });
+    canvas.append(back, front);
+  };
+
+  const paint = (values: number[]) => {
+    shown = values;
+    const { cx, cy, radii } = geometry;
+    const a0 = startAngle();
+    arcs.forEach((arc, i) => {
+      const share = Math.min(1, Math.max(0, (values[i] ?? 0) / model[i]!.max));
+      arc.setAttribute('d', share > 0.001 ? strokeArc(cx, cy, radii[i]!, a0, a0 + sweep() * share) : '');
+    });
+  };
+
+  const paintCenter = (animate: boolean) => {
+    center.hidden = !model.length;
+    const ring = selected === null ? null : model[selected];
+    const text = ring ? format(ring.value) : format(total());
+    const caption = ring ? `${ring.label} · ${percent(ring)}` : (options.totalLabel ?? 'Total');
+    const changed = centerLabel.textContent !== caption;
+    if (centerValue.textContent !== text) {
+      if (animate && !reduced() && centerValue.textContent) keep(rollDigits(centerValue, text, 1, 0.35));
+      else centerValue.textContent = text;
+    }
+    centerLabel.textContent = caption;
+    if (changed && animate && !reduced()) keep(blurIn(centerLabel, { from: 'soft', duration: 0.3 }));
+  };
+
+  let legendItems: HTMLLIElement[] = [];
+  const paintSelection = (announce: boolean) => {
+    for (const list of [arcs, tracks]) list.forEach((each, i) => {
+      each.toggleAttribute('data-mk-on', i === selected);
+      each.toggleAttribute('data-mk-dim', selected !== null && i !== selected);
+    });
+    legendItems.forEach((item, i) => item.toggleAttribute('data-mk-dim', selected !== null && i !== selected));
+    paintCenter(true);
+    const ring = selected === null ? null : model[selected];
+    if (announce && ring) frame.live.textContent = `${ring.label}: ${format(ring.value)} de ${format(ring.max)}, ${percent(ring)}`;
+  };
+
+  const draw = (animate: boolean) => {
+    glide?.kill();
+    const name = options.label ?? 'Gráfica radial';
+    canvas.setAttribute('aria-label', model.length ? `${name}. ${model.length} anillos, total ${format(total())}. Usa las flechas para recorrerlos.` : `${name}: ${options.emptyLabel ?? 'sin datos'}`);
+    frame.fillTable(name, ['Anillo', 'Valor', 'Meta', 'Avance'], model.map((ring) => [ring.label, format(ring.value), format(ring.max), percent(ring)]));
+    legendItems = frame.fillLegend(model.map((datum) => ({ name: datum.label, color: datum.color })), options.legend ?? true);
+    legendItems.forEach((item, i) => {
+      item.addEventListener('pointerenter', () => select(i));
+      item.addEventListener('pointerleave', () => select(null));
+    });
+    frame.empty.hidden = model.length > 0;
+    frame.empty.textContent = options.emptyLabel ?? 'Sin datos para mostrar';
+    plot.hidden = !model.length;
+    if (!model.length) {
+      canvas.replaceChildren();
+      arcs = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.length) selected = null;
+    const before = shown;
+    const comparable = before.length === model.length && arcs.length === model.length;
+    measure();
+    build();
+    const target = model.map((ring) => ring.value);
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (comparable) {
+      glide = gsap.to(state, { t: 1, duration: 0.6, ease: EASE.swatch, onUpdate: () => paint(target.map((value, i) => before[i]! + (value - before[i]!) * state.t)), onComplete: done });
+      paintCenter(true);
+      return;
+    }
+    // First appearance: the rings sweep in from the outside in, 80 ms apart, and the total rolls up.
+    const stagger = 0.08;
+    const length = 0.8 + stagger * (target.length - 1);
+    const ease = gsap.parseEase(EASE.swatch);
+    paint(target.map(() => 0));
+    centerValue.textContent = format(0);
+    glide = gsap.to(state, {
+      t: length,
+      duration: length,
+      ease: 'none',
+      onUpdate: () => paint(target.map((value, i) => value * ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.8))))),
+      onComplete: done,
+    });
+    paintCenter(true);
+  };
+
+  const select = (index: number | null, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.length ? null : ((Math.round(index) % model.length) + model.length) % model.length;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    const ring = selected === null ? null : model[selected];
+    root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { index: selected, label: ring?.label ?? null, value: ring?.value ?? null } }));
+  };
+
+  /** The ring under the pointer (by its distance from the middle). */
+  const ringAt = (event: PointerEvent) => {
+    const box = canvas.getBoundingClientRect();
+    const scale = box.width ? geometry.size / box.width : 1;
+    const distance = Math.hypot((event.clientX - box.left) * scale - geometry.cx, (event.clientY - box.top) * scale - geometry.cy);
+    const near = geometry.radii.findIndex((r) => Math.abs(distance - r) <= geometry.thickness * 0.7);
+    return near < 0 ? null : near;
+  };
+  scope.on(canvas, 'pointermove', (event) => select(ringAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerdown', (event) => select(ringAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerleave', (event) => {
+    if ((event as PointerEvent).pointerType === 'mouse') select(null);
+  });
+  scope.on(canvas, 'focus', () => {
+    if (selected === null && model.length) select(0, true);
+  });
+  scope.on(canvas, 'blur', () => select(null));
+  scope.on(canvas, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const moves: Record<string, number | null> = { ArrowDown: (selected ?? -1) + 1, ArrowRight: (selected ?? -1) + 1, ArrowUp: (selected ?? 1) - 1, ArrowLeft: (selected ?? 1) - 1, Home: 0, End: model.length - 1, Escape: null };
+    if (!(key in moves) || !model.length) return;
+    event.preventDefault();
+    select(moves[key]!, true);
+  });
+  onWidth(root, scope, () => {
+    if (!model.length) return;
+    measure();
+    build();
+    paint(shown);
+    paintSelection(false);
+  });
+
+  draw(true);
+
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select: (index) => select(index),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

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

@@ -0,0 +1,100 @@
+/* radial-chart — rings with round ends over soft tracks; needs chart.css for the family.
+   The chosen ring thickens, the others dim, and the middle names it. */
+.mk-radial-chart,
+mk-radial-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-svg] {
+  width: var(--mk-radial-size, 240px);
+  max-width: 100%;
+  margin-inline: auto;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: var(--mk-radial-thickness, 12px);
+  transition:
+    stroke-width 0.35s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radial'] [data-mk-part='tracks'] path {
+  stroke: var(--mk-chart-grid);
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-on] {
+  stroke-width: calc(var(--mk-radial-thickness, 12px) + 4px);
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-dim] {
+  opacity: 0.35;
+}
+
+[data-mk-radial-center] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  max-width: calc(var(--mk-radial-size, 240px) * 0.36);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+[data-mk-radial-center][hidden] {
+  display: none;
+}
+
+[data-mk-radial-center] strong {
+  color: var(--mk-text);
+  font-size: clamp(1rem, calc(var(--mk-radial-size, 240px) * 0.1), 1.75rem);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+[data-mk-radial-center] span {
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] li {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] li[data-mk-dim] {
+  opacity: 0.45;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+    transition: opacity 0.2s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='radial'] [data-mk-part='series'] path {
+    stroke: Highlight !important;
+  }
+}

package/src/components/radial-chart/react.tsx

@@ -0,0 +1,14 @@
+'use client';
+import type { HTMLAttributes } from 'react';
+import { useChart } from '../chart/use-chart';
+import { createRadialChart, type RadialChartInstance, type RadialChartOptions } from './engine';
+
+export interface RadialChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, RadialChartOptions {
+  instanceRef?: { current: RadialChartInstance | null };
+}
+
+/** <RadialChart label="Metas" data={[{ label: 'Pasos', value: 7400, max: 10000 }, …]} /> */
+export function RadialChart({ data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }: RadialChartProps) {
+  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel } as RadialChartOptions, { formatValue, onSelect }, instanceRef);
+  return <div {...props} ref={ref} className={['mk-chart mk-radial-chart', className].filter(Boolean).join(' ')} />;
+}

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

@@ -0,0 +1,48 @@
+# sankey-chart
+
+Flujos entre etapas con enlaces proporcionales a su valor, entrada escalonada y selección de recorridos.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { SankeyChart } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add sankey-chart --react --elements
+```
+
+## React
+
+```tsx
+<SankeyChart nodes={[{ id: "visitas", label: "Visitas" }, { id: "ventas", label: "Ventas" }]} links={[{ source: "visitas", target: "ventas", value: 42 }]} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-sankey-chart nodes='[{"id":"visitas","label":"Visitas"},{"id":"ventas","label":"Ventas"}]' links='[{"source":"visitas","target":"ventas","value":42}]'></mk-sankey-chart>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-sankey-chart']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createSankeyChart } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+nodes: {id, label?, color?}[]. links: {source, target, value}[]. height: 320 px. nodeWidth: 12 px. nodePadding: 14 px. Usa un grafo dirigido sin ciclos; se omiten enlaces inválidos, no positivos o sin nodo.
+
+Todos los gráficos aceptan `label`, `emptyLabel` y `formatValue`. Se actualizan con `update(options)` sin desmontarse; `select(index | null)` y `selected` controlan la selección (en heatmap se usa una fecha). `onSelect` también emite `mk:select`.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-chart-1…8, --mk-chart-surface.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

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

@@ -0,0 +1,31 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createSankeyChart, type SankeyChartInstance, type SankeyChartOptions } from './engine';
+
+/**
+ * <mk-sankey-chart class="mk-chart mk-sankey-chart" label="Embudo de ventas"
+ *   nodes='[{"id":"visitas","label":"Visitas"},{"id":"carrito","label":"Carrito"}]'
+ *   links='[{"source":"visitas","target":"carrito","value":420}]'></mk-sankey-chart>
+ * Attribute changes glide in place. Emits mk:select ({index, source, target, value}).
+ */
+export class MkSankeyChartElement extends MkElement<SankeyChartInstance> {
+  static options: Record<string, OptionType> = { nodes: 'json', links: 'json', height: 'number', nodeWidth: 'number', nodePadding: 'number', label: 'string', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createSankeyChart(this, options as SankeyChartOptions);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update(this.options as SankeyChartOptions);
+  }
+
+  update(options: SankeyChartOptions) {
+    this.instance?.update(options);
+  }
+
+  select(index: number | null) {
+    this.instance?.select(index);
+  }
+}
+
+export const defineSankeyChart = () => defineElement('mk-sankey-chart', MkSankeyChartElement);