@yewdiel21/motion-kit 0.15.0 → 0.17.0

package/src/components/add-to-cart/README.md

@@ -1,34 +1,49 @@
-# add-to-cart
-
-Qué hace, en una frase.
-
-Origen: archivo del kit y parámetros (tiempos, curvas).
-
-## HTML / Astro
-
-```html
-<mk-add-to-cart></mk-add-to-cart>
-<script>
-  import { defineElements } from '@yewdiel21/motion-kit/elements';
-  defineElements(['mk-add-to-cart']);
-</script>
-```
-
-## React
-
-```tsx
-<AddToCart />
-```
-
-## Opciones
-
-| Opción | Atributo | Por defecto | Qué hace |
-|---|---|---|---|
-
-## Variables CSS
-
-`--mk-add-to-cart-radius`
-
-## Accesibilidad
-
-Roles, foco y teclado. Con movimiento reducido…
+# add-to-cart
+
+El producto se empaca en una caja y vuela hasta un carrito; al llegar, el contador cambia y el carrito responde con un pulso. Cada clic tiene su propio vuelo. Con movimiento reducido, el contador se actualiza al instante.
+
+## React
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { AddToCart } from '@yewdiel21/motion-kit/react';
+
+<div id="my-cart">Carrito <span data-mk-cart-count>0</span></div>
+<article data-mk-cart-item>
+  <img src="/product.webp" alt="Producto" data-mk-cart-image />
+  <AddToCart target="#my-cart" onLand={count => console.log(count)}>
+    <button type="button">Agregar al carrito</button>
+  </AddToCart>
+</article>
+```
+
+**El botón es obligatorio.** Para ver el recorrido necesitas un destino visible y una imagen. Usa un destino único por demo o carrito para no mezclar instancias. El componente anima la interfaz; la aplicación gestiona el carrito y el inventario reales.
+
+## HTML / Astro
+
+```html
+<div id="my-cart">Carrito <span data-mk-cart-count>0</span></div>
+<article data-mk-cart-item>
+  <img src="/product.webp" alt="Producto" data-mk-cart-image>
+  <mk-add-to-cart target="#my-cart"><button type="button">Agregar</button></mk-add-to-cart>
+</article>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-add-to-cart']);
+</script>
+```
+
+En vanilla puedes llamar a `createAddToCart(root, options)`. `destroy()` limpia los vuelos y listeners.
+
+## Opciones y eventos
+
+- `target`: HTMLElement o selector del carrito; por defecto busca `[data-mk-cart-target]` visible.
+- `image`: HTMLElement o selector; por defecto `[data-mk-cart-image]` dentro del producto.
+- `quantity`: unidades por clic, 1 por defecto.
+- `count`: contador inicial; en React también sincroniza cambios posteriores.
+- `label`: anuncio al llegar, por defecto “Añadido al carrito”.
+- `onAdd(count)`: al pulsar; `onLand(count)`: al terminar el vuelo.
+- Eventos DOM: `mk:add` y `mk:land`, con `detail.count`.
+- Instancia: `add()`, `setCount(count)`, `count`, `destroy()`; React expone `instanceRef`.
+
+El estado final se anuncia con `role="status"`. Usa un botón nativo con nombre accesible. Los vuelos son decorativos, no capturan el puntero y se eliminan al desmontar.

package/src/components/add-to-cart/react.tsx

@@ -12,15 +12,19 @@ export function AddToCart({ target, image, quantity, count, label, onAdd, onLand
   const ref = useRef<HTMLDivElement>(null);
   const add = useLatest(onAdd);
   const landed = useLatest(onLand);
+  const instance = useRef<AddToCartInstance | null>(null);
   useIsomorphicLayoutEffect(() => {
     const created = createAddToCart(ref.current, { target, image, quantity, count, label, onAdd: (n) => add.current?.(n), onLand: (n) => landed.current?.(n) });
+    instance.current = created;
     if (instanceRef) instanceRef.current = created;
     return () => {
       created.destroy();
+      instance.current = null;
       if (instanceRef) instanceRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [typeof target === 'string' ? target : null, typeof image === 'string' ? image : null, quantity, label]);
+  useIsomorphicLayoutEffect(() => { if (count !== undefined) instance.current?.setCount(count); }, [count]);
   return (
     <div {...props} ref={ref} className={['mk-add-to-cart', className].filter(Boolean).join(' ')}>
       {children}

package/src/components/chart/README.md

@@ -1,34 +1,49 @@
-# chart
-
-Desde 0.15 también puedes mezclar series con `type="composed"`. Cada serie declara `type: 'line' | 'bar' | 'area'`. Un área acepta `lowerValues` para rellenar el intervalo entre la frontera inferior y `values`; los huecos `null` interrumpen el relleno. La tabla y el tooltip muestran ambos límites.
-
-```tsx
-<Chart type="composed" labels={['Lun', 'Mar', 'Mié']} series={[
-  { name: 'Ventas', type: 'bar', values: [20, 32, 28] },
-  { name: 'Meta', type: 'line', values: [25, 30, 35] },
-  { name: 'Rango', type: 'area', values: [24, 36, 32], lowerValues: [16, 26, 22] },
-]} axis endLabel={false} />
-```
-
-Gráfica SVG reutilizable de línea, área y barras (agrupadas o apiladas) sin motor canvas ni dependencias. Sigue las gráficas de métricas de Melon Mind: base en cero, línea de 2 px, área que se desvanece de .25 a 0, barras de hasta 24 px con extremo redondeado de 4 px y huecos de 2 px, rejilla fina y tooltip con superficie invertida.
-
-```html
-<mk-chart class="mk-chart" type="bar" stacked label="Sesiones por semana"
-  labels="S1,S2,S3,S4"
-  series='[{"name":"Ana","values":[4,6,5,7]},{"name":"Luis","values":[2,3,4,1]}]'></mk-chart>
-```
-
-```ts
-const chart = createChart(root, { type: 'area', labels: days, series: [{ name: 'Ingresos', values }], formatValue: money, label: 'Ingresos de octubre' });
-chart.update({ series: [{ name: 'Ingresos', values: next }] });
-```
-
-React: `<Chart type="line" labels={days} series={series} formatValue={money} label="Ingresos" onSelect={setDay} />`.
-
-Datos: `labels` + `series: ChartSeries[]` (`{name, values: (number | null)[], color?, dash?}`; `dash` es un patrón SVG para líneas, p. ej. `'5 5'` para un ritmo o `'1 6'` para una proyección) o `points: ChartPoint[]` (`{label, value}`) para una serie. `null` es un hueco sin dato: la línea se corta y un punto aislado se muestra con marcador. Opciones: `type='line'|'area'|'bar'`, `stacked` (barras), `formatValue(n)` (ejes, tooltip y tabla), `label` (nombre accesible y título de la tabla), `height=240`, `emptyLabel`, `legend` (por defecto con dos o más series), `axis` (valores y líneas guía en el eje y; por defecto sólo la línea base), `endLabel` (líneas: el último valor de la primera serie en una píldora al final; por defecto `true`), `tooltip` (por defecto `true`; con `false` la gráfica deja la guía y los marcadores y la tarjeta la pone `chart-tooltip`), `onSelect(index | null)`. API: `update(options)` (combina y redibuja), `select(index | null)`, `selected`, `destroy()`. Evento `mk:select` con `{index, label, values, x, y, series}`: `x`/`y` son el punto señalado en píxeles del área de la gráfica y `series` trae `{name, color, value, previous}` por serie.
-
-Puntero y toque eligen el punto más cercano (el toque mantiene la selección; el ratón la quita al salir). Con foco en la gráfica, flechas/Inicio/Fin recorren los valores y Escape los oculta; un estado educado anuncia el valor elegido. La gráfica tiene un resumen como nombre accesible y una tabla para lectores de pantalla con todos los valores (y el total en barras apiladas). Sin datos muestra `emptyLabel`.
-
-Movimiento: el primer dibujo traza la línea de izquierda a derecha (barras: crecen desde la base) y cada `update` desliza los valores nuevos desde los anteriores; el tooltip aparece con un pop de cristal y se desliza entre puntos. Con movimiento reducido todo cambia sin transición.
-
-Colores: una sola serie es monocroma (`--mk-chart-mono`, el color del texto, al estilo de los indicadores de Melon Mind); con varias, cada serie usa su `color` o la ranura `--mk-chart-N` en orden fijo (paleta comprobada para daltonismo, con pasos propios en oscuro); a partir de la novena serie todas comparten `--mk-chart-other`: agrúpalas en «Otros». Los textos usan los colores de texto del tema; el color identifica la marca. Se redimensiona con su contenedor (ResizeObserver) y `destroy()` quita todo lo creado. Variables: `--mk-chart-mono`, `--mk-chart-1…8`, `--mk-chart-other`, `--mk-chart-surface` (anillo de marcadores), `--mk-chart-grid`.
+# chart
+
+Desde 0.15 también puedes mezclar series con `type="composed"`. Cada serie declara `type: 'line' | 'bar' | 'area'`. Un área acepta `lowerValues` para rellenar el intervalo entre la frontera inferior y `values`; los huecos `null` interrumpen el relleno. La tabla y el tooltip muestran ambos límites.
+
+```tsx
+<Chart type="composed" labels={['Lun', 'Mar', 'Mié']} series={[
+  { name: 'Ventas', type: 'bar', values: [20, 32, 28] },
+  { name: 'Meta', type: 'line', values: [25, 30, 35] },
+  { name: 'Rango', type: 'area', values: [24, 36, 32], lowerValues: [16, 26, 22] },
+]} axis endLabel={false} />
+```
+
+Gráfica SVG reutilizable de línea, área y barras (agrupadas o apiladas) sin motor canvas ni dependencias. Sigue las gráficas de métricas de Melon Mind: base en cero, línea de 2 px, área que se desvanece de .25 a 0, barras de hasta 24 px con extremo redondeado de 4 px y huecos de 2 px, rejilla fina y tooltip con superficie invertida.
+
+```html
+<mk-chart class="mk-chart" type="bar" stacked label="Sesiones por semana"
+  labels="S1,S2,S3,S4"
+  series='[{"name":"Ana","values":[4,6,5,7]},{"name":"Luis","values":[2,3,4,1]}]'></mk-chart>
+```
+
+```ts
+const chart = createChart(root, { type: 'area', labels: days, series: [{ name: 'Ingresos', values }], formatValue: money, label: 'Ingresos de octubre' });
+chart.update({ series: [{ name: 'Ingresos', values: next }] });
+```
+
+React: `<Chart type="line" labels={days} series={series} formatValue={money} label="Ingresos" onSelect={setDay} />`.
+
+Datos: `labels` + `series: ChartSeries[]` (`{name, values: (number | null)[], color?, dash?}`; `dash` es un patrón SVG para líneas, p. ej. `'5 5'` para un ritmo o `'1 6'` para una proyección) o `points: ChartPoint[]` (`{label, value}`) para una serie. `null` es un hueco sin dato: la línea se corta y un punto aislado se muestra con marcador. Opciones: `type='line'|'area'|'bar'`, `stacked` (barras), `formatValue(n)` (ejes, tooltip y tabla), `label` (nombre accesible y título de la tabla), `height=240`, `emptyLabel`, `legend` (por defecto con dos o más series), `axis` (valores y líneas guía en el eje y; por defecto sólo la línea base), `endLabel` (líneas: el último valor de la primera serie en una píldora al final; por defecto `true`), `tooltip` (por defecto `true`; con `false` la gráfica deja la guía y los marcadores y la tarjeta la pone `chart-tooltip`), `onSelect(index | null)`. API: `update(options)` (combina y redibuja), `select(index | null)`, `selected`, `destroy()`. Evento `mk:select` con `{index, label, values, x, y, series}`: `x`/`y` son el punto señalado en píxeles del área de la gráfica y `series` trae `{name, color, value, previous}` por serie.
+
+Puntero y toque eligen el punto más cercano (el toque mantiene la selección; el ratón la quita al salir). Con foco en la gráfica, flechas/Inicio/Fin recorren los valores y Escape los oculta; un estado educado anuncia el valor elegido. La gráfica tiene un resumen como nombre accesible y una tabla para lectores de pantalla con todos los valores (y el total en barras apiladas). Sin datos muestra `emptyLabel`.
+
+Movimiento: el primer dibujo traza la línea de izquierda a derecha (barras: crecen desde la base) y cada `update` desliza los valores nuevos desde los anteriores; el tooltip aparece con un pop de cristal y se desliza entre puntos. Con movimiento reducido todo cambia sin transición.
+
+Colores: una sola serie es monocroma (`--mk-chart-mono`, el color del texto, al estilo de los indicadores de Melon Mind); con varias, cada serie usa su `color` o la ranura `--mk-chart-N` en orden fijo (paleta comprobada para daltonismo, con pasos propios en oscuro); a partir de la novena serie todas comparten `--mk-chart-other`: agrúpalas en «Otros». Los textos usan los colores de texto del tema; el color identifica la marca. Se redimensiona con su contenedor (ResizeObserver) y `destroy()` quita todo lo creado. Variables: `--mk-chart-mono`, `--mk-chart-1…8`, `--mk-chart-other`, `--mk-chart-surface` (anillo de marcadores), `--mk-chart-grid`.
+
+## Variantes visuales · 0.16
+
+```tsx
+<Chart type="bar" barStyle="pill" barTrack barFill="spotlight" barWidth={40}
+  labels={['Lun', 'Mar', 'Mié']} series={[{ name: 'Enfoque', values: [32, 56, 44] }]} />
+```
+
+- `barStyle`: `rounded` (compatibilidad) o `pill` (ambos extremos redondos). Las pilas comparten un recorte exterior por columna.
+- `barTrack`: fondo de capacidad, false por defecto.
+- `barFill`: `solid`, `gradient` o `spotlight` (selección con degradado sobre columnas rayadas). Sin selección, spotlight destaca la última columna.
+- `barWidth`: ancho máximo, 24 px por defecto; se adapta al espacio disponible.
+- `curve`: `linear` o `smooth`. La interpolación suave conserva los extremos reales y también funciona en áreas por rangos.
+
+La selección de una píldora muestra un valor flotante. Pointer, tacto y teclado usan la misma selección. La entrada se escalona por columnas y los cambios de datos continúan desde los valores dibujados, también al interrumpir una transición.

package/src/components/chart/chart.css

@@ -15,6 +15,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -120,6 +121,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/src/components/chart/element.ts

@@ -13,6 +13,7 @@ export class MkChartElement extends MkElement<ChartInstance> {
     series: 'json',
     points: 'json',
     stacked: 'boolean',
+    barStyle: 'string', barTrack: 'boolean', barFill: 'string', barWidth: 'number', curve: 'string',
     label: 'string',
     height: 'number',
     emptyLabel: 'string',
@@ -28,7 +29,7 @@ export class MkChartElement extends MkElement<ChartInstance> {
 
   attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
     if (previous === next || !this.instance) return;
-    this.instance.update({ stacked: false, legend: undefined, ...(this.options as ChartOptions) });
+    this.instance.update({ stacked: false, barTrack: false, barStyle: undefined, barFill: undefined, barWidth: undefined, curve: undefined, legend: undefined, ...(this.options as ChartOptions) });
   }
 
   update(options: ChartOptions) {

package/src/components/chart/engine.ts

@@ -47,6 +47,16 @@ export interface ChartOptions {
   points?: ChartPoint[];
   /** Bars only: stack the series. */
   stacked?: boolean;
+  /** Rounded ends (default) or a full capsule, including stacked columns. */
+  barStyle?: 'rounded' | 'pill';
+  /** Show the available capacity behind each column. */
+  barTrack?: boolean;
+  /** Solid (default), gradient, or a gradient selection over muted striped columns. */
+  barFill?: 'solid' | 'gradient' | 'spotlight';
+  /** Maximum column width in px (default 24; pill demos use 40). */
+  barWidth?: number;
+  /** Smooth monotone curves preserve the data's extrema (default linear). */
+  curve?: 'linear' | 'smooth';
   formatValue?: (value: number) => string;
   /** Accessible name (and table caption). */
   label?: string;
@@ -102,6 +112,25 @@ function barPath(x: number, width: number, base: number, end: number, rounded: b
   return `M${round(x)},${round(base)}V${round(end + dir * r)}Q${round(x)},${round(end)} ${round(x + r)},${round(end)}H${round(x + width - r)}Q${round(x + width)},${round(end)} ${round(x + width)},${round(end + dir * r)}V${round(base)}Z`;
 }
 
+function pillPath(x: number, width: number, a: number, b: number) {
+  const top = Math.min(a, b), bottom = Math.max(a, b);
+  const r = Math.min(width / 2, (bottom - top) / 2);
+  return `M${round(x + r)},${round(top)}H${round(x + width - r)}Q${round(x + width)},${round(top)} ${round(x + width)},${round(top + r)}V${round(bottom - r)}Q${round(x + width)},${round(bottom)} ${round(x + width - r)},${round(bottom)}H${round(x + r)}Q${round(x)},${round(bottom)} ${round(x)},${round(bottom - r)}V${round(top + r)}Q${round(x)},${round(top)} ${round(x + r)},${round(top)}Z`;
+}
+
+/** Cubic Hermite interpolation with bounded tangents: no invented peaks between samples. */
+function linePath(points: number[][], smooth: boolean) {
+  if (!points.length) return '';
+  let path = `M${round(points[0][0])},${round(points[0][1])}`;
+  const slopes = points.slice(1).map((point, i) => (point[1] - points[i][1]) / (point[0] - points[i][0] || 1));
+  const tangents = points.map((_, i) => i === 0 ? slopes[0] : i === points.length - 1 ? slopes[i - 1] : slopes[i - 1] * slopes[i] <= 0 ? 0 : 2 * slopes[i - 1] * slopes[i] / (slopes[i - 1] + slopes[i]));
+  for (let i = 1; i < points.length; i++) {
+    const [x0, y0] = points[i - 1], [x, y] = points[i], dx = (x - x0) / 3;
+    path += smooth ? `C${round(x0 + dx)},${round(y0 + tangents[i - 1] * dx)} ${round(x - dx)},${round(y - tangents[i] * dx)} ${round(x)},${round(y)}` : `L${round(x)},${round(y)}`;
+  }
+  return path;
+}
+
 interface Model {
   labels: string[];
   series: Array<ChartSeries & { color: string }>;
@@ -357,6 +386,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const slot = plotW / n;
     const xs = model.labels.map((_, i) => (bar ? left + slot * (i + 0.5) : n === 1 ? left + plotW / 2 : left + (plotW * i) / (n - 1)));
     geometry = { width, height, top, bottom: top + plotH, left, right: width - right, xs, y, base };
+    shown = { values, lower, lo, hi, type: type(), stacked: stacked() };
 
     // Baseline (and, with `axis`, hairlines with their values).
     const grid = svg('g', { 'data-mk-part': 'grid' });
@@ -401,10 +431,46 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     if (bar) {
       const barIndices = model.series.flatMap((_, index) => seriesType(index) === 'bar' ? [index] : []);
       const groups = stacked() ? 1 : barIndices.length;
-      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP * (groups - 1)) / groups));
+      const maxWidth = finite(options.barWidth) ? Math.max(2, Math.min(96, options.barWidth)) : BAR_MAX;
+      const barWidth = Math.max(2, Math.min(maxWidth, (slot * 0.62 - GAP * (groups - 1)) / groups));
+      const pill = options.barStyle === 'pill';
+      const trackLayer = svg('g', { 'data-mk-part': 'bar-tracks' });
+      canvas.append(trackLayer);
+      if (options.barFill && options.barFill !== 'solid') {
+        model.series.forEach((series, k) => {
+          const gradient = svg('linearGradient', { id: `${uid}-bar-${k}`, x1: 0, y1: 0, x2: 0, y2: 1 });
+          for (const [offset, opacity] of [['0', '1'], ['1', '0.4']]) {
+            const stop = svg('stop', { offset }); stop.style.stopColor = series.color; stop.style.stopOpacity = opacity; gradient.append(stop);
+          }
+          defs.append(gradient);
+        });
+        const hatch = svg('pattern', { id: `${uid}-hatch`, patternUnits: 'userSpaceOnUse', width: 6, height: 6, patternTransform: 'rotate(35)' });
+        const ground = svg('rect', { width: 6, height: 6 }); ground.style.fill = 'var(--mk-chart-track)';
+        const stripe = svg('line', { x1: 0, x2: 0, y1: 0, y2: 6 }); stripe.style.stroke = 'var(--mk-chart-grid)'; stripe.style.strokeWidth = '2';
+        hatch.append(ground, stripe); defs.append(hatch);
+      }
+      const fillBar = (path: SVGPathElement, k: number, index: number) => {
+        const fill = options.barFill && options.barFill !== 'solid' ? `url(#${uid}-bar-${k})` : model.series[k]!.color;
+        path.style.setProperty('--mk-bar-fill', fill);
+        path.style.fill = options.barFill === 'spotlight' && index !== (selected ?? n - 1) ? `url(#${uid}-hatch)` : fill;
+      };
+      const addTrack = (x: number) => {
+        if (!options.barTrack) return;
+        const path = svg('path', { d: pillPath(x, barWidth, top, base), 'data-mk-part': 'bar-track' });
+        trackLayer.append(path);
+      };
       const totalsLayer = svg('g', { 'data-mk-part': 'totals' });
       model.labels.forEach((_, i) => {
         if (stacked()) {
+          const clipId = `${uid}-stack-${i}`;
+          if (pill) {
+            const sum = totalsOf(values, i);
+            const clip = svg('clipPath', { id: clipId });
+            if (sum.up) clip.append(svg('path', { d: pillPath(xs[i]! - barWidth / 2, barWidth, base, y(sum.up)) }));
+            if (sum.down) clip.append(svg('path', { d: pillPath(xs[i]! - barWidth / 2, barWidth, base, y(sum.down)) }));
+            defs.append(clip);
+          }
+          addTrack(xs[i]! - barWidth / 2);
           let up = 0;
           let down = 0;
           const outer = { up: -1, down: -1 };
@@ -424,8 +490,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             const start = y(from) + (from !== 0 ? (value > 0 ? -GAP : GAP) : 0);
             const end = y(to);
             if ((value > 0 && end >= start) || (value < 0 && end <= start)) return;
-            const path = svg('path', { d: barPath(xs[i]! - barWidth / 2, barWidth, start, end, k === (value > 0 ? outer.up : outer.down)), 'data-mk-index': i, 'data-mk-series': k });
-            path.style.fill = model.series[k]!.color;
+            const path = svg('path', { d: barPath(xs[i]! - barWidth / 2, barWidth, start, end, !pill && k === (value > 0 ? outer.up : outer.down)), 'data-mk-part': 'bar', 'data-mk-index': i, 'data-mk-series': k });
+            if (pill) path.setAttribute('clip-path', `url(#${clipId})`);
+            fillBar(path, k, i);
             marks.append(path);
           });
           // The stack total above it, when the columns have room.
@@ -440,10 +507,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
           values.forEach((list, k) => {
             if (seriesType(k) !== 'bar') return;
             const value = list[i];
-            if (!finite(value) || value === 0) return;
             const x = xs[i]! - groupWidth / 2 + barIndices.indexOf(k) * (barWidth + GAP);
-            const path = svg('path', { d: barPath(x, barWidth, base, y(value), true), 'data-mk-index': i, 'data-mk-series': k });
-            path.style.fill = model.series[k]!.color;
+            addTrack(x);
+            if (!finite(value) || value === 0) return;
+            const path = svg('path', { d: pill ? pillPath(x, barWidth, base, y(value)) : barPath(x, barWidth, base, y(value), true), 'data-mk-part': 'bar', 'data-mk-index': i, 'data-mk-series': k });
+            fillBar(path, k, i);
             marks.append(path);
           });
         }
@@ -477,7 +545,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
           defs.append(gradient);
           for (const points of runs) {
             if (points.length < 2) continue;
-            const d = `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}L${[...points].reverse().map(([px, , py]) => `${round(px)},${round(py)}`).join('L')}Z`;
+            const upper = linePath(points, options.curve === 'smooth');
+            const bottom = linePath([...points].reverse().map(([px, , py]) => [px, py]), options.curve === 'smooth');
+            const d = `${upper}${bottom.replace(/^M/, 'L')}Z`;
             const area = svg('path', { d, 'data-mk-part': 'area', 'data-mk-series': k });
             area.style.fill = `url(#${uid}-fill-${k})`;
             marks.append(area);
@@ -491,7 +561,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             marks.append(dot);
             continue;
           }
-          const line = svg('path', { d: `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}`, 'data-mk-part': 'line' });
+          const line = svg('path', { d: linePath(points, options.curve === 'smooth'), 'data-mk-part': 'line' });
           line.style.stroke = series.color;
           // Dotted patterns (a first dash of 1 or less) draw round dots; dashes stay thin.
           const dotted = Boolean(series.dash) && Number(series.dash!.trim().split(/[\s,]+/)[0]) <= 1;
@@ -531,6 +601,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     cursor.replaceChildren();
     if (band) band.style.display = 'none';
     for (const mark of canvas.querySelectorAll('[data-mk-index]')) mark.removeAttribute('data-mk-dim');
+    for (const mark of canvas.querySelectorAll<SVGPathElement>('[data-mk-part="bar"]')) {
+      const index = Number(mark.dataset.mkIndex);
+      mark.toggleAttribute('data-mk-active', index === selected);
+      if (options.barFill === 'spotlight') mark.style.fill = index === (selected ?? model.labels.length - 1) ? mark.style.getPropertyValue('--mk-bar-fill') : `url(#${uid}-hatch)`;
+    }
     if (selected === null || !hasData()) {
       if (!tooltip.hidden && !reduced()) {
         gsap.killTweensOf(tooltip, 'opacity,scale');
@@ -555,6 +630,20 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       for (const mark of canvas.querySelectorAll<SVGElement>('[data-mk-index]')) if (mark.getAttribute('data-mk-index') !== String(i)) mark.setAttribute('data-mk-dim', '');
       const { up, down } = totals(i);
       anchorY = stacked() ? geometry.y(up || down) : Math.min(...model.series.map((series) => (finite(series.values[i]) ? geometry.y(series.values[i]!) : geometry.bottom)));
+      if (options.barStyle === 'pill') {
+        const amount = stacked() ? up + down : model.series[0]?.values[i];
+        if (finite(amount)) {
+          const label = format(amount), width = Math.max(40, label.length * 7 + 18);
+          const bx = Math.max(0, Math.min(geometry.width - width, x - width / 2));
+          const by = Math.max(0, anchorY - 32);
+          const group = svg('g', { 'data-mk-part': 'bar-value' });
+          group.append(svg('rect', { x: round(bx), y: round(by), width, height: 24, rx: 12 }));
+          const text = svg('text', { x: round(bx + width / 2), y: round(by + 12), 'text-anchor': 'middle', 'dominant-baseline': 'middle' });
+          text.textContent = label; group.append(text); cursor.append(group);
+          const marker = svg('circle', { cx: round(x), cy: round(anchorY), r: 4, 'data-mk-part': 'marker' }); marker.style.fill = model.series[0]?.color ?? 'var(--mk-text)'; cursor.append(marker);
+          if (fresh && !reduced()) keep(gsap.fromTo(group, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.3, ease: EASE.pop }));
+        }
+      }
     } else {
       cursor.append(svg('line', { x1: round(x), x2: round(x), y1: geometry.top, y2: geometry.bottom, 'data-mk-part': 'guide' }));
       model.series.forEach((series) => {
@@ -644,6 +733,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     glide?.kill();
     canvas.setAttribute('aria-label', describe());
     scope.attr(root, 'data-mk-chart-type', type());
+    scope.attr(root, 'data-mk-bar-style', options.barStyle ?? 'rounded');
     renderTable();
     renderLegend();
     const ok = hasData();
@@ -700,12 +790,14 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     // First appearance: bars grow from the baseline, lines wipe in from the left.
     finish();
     if (type() === 'bar') {
-      const state = { t: 0 };
+      const stagger = Math.min(0.045, 0.22 / Math.max(1, model.labels.length - 1));
+      const length = 0.7 + stagger * (model.labels.length - 1);
+      const state = { t: 0 }, ease = gsap.parseEase(EASE.swatch);
       glide = gsap.to(state, {
-        t: 1,
-        duration: 0.7,
-        ease: EASE.swatch,
-        onUpdate: () => paint(target.map((list) => list.map((value) => (finite(value) ? value * state.t : value))), domain.lo, domain.hi, domain.step),
+        t: length,
+        duration: length,
+        ease: 'none',
+        onUpdate: () => paint(target.map((list) => list.map((value, i) => (finite(value) ? value * Math.max(0, ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.7)))) : value))), domain.lo, domain.hi, domain.step),
         onComplete: () => {
           finish();
           settle();

package/src/components/chart/react.tsx

@@ -11,13 +11,13 @@ export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSele
  * <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) {
+export function Chart({ type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, 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 data = { type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, label, height, emptyLabel, legend, tooltip, axis, endLabel };
   const key = JSON.stringify(data);
   const latest = useLatest(data);
   const options = (): ChartOptions => ({

package/src/components/drilldown-menu/README.md

@@ -0,0 +1,163 @@
+# Drilldown Menu
+
+A hierarchical action menu that shows one level at a time. Opening a branch slides the new level in from the right through a 6 px blur; going back reverses the direction. Motion uses the kit's signature curve over 360 ms. The engine keeps one live menu, cancels interrupted motion, and honors reduced motion.
+
+## Vanilla
+
+```html
+<div id="actions" class="mk-drilldown-menu"></div>
+```
+
+```ts
+import { createDrilldownMenu, type DrilldownMenuItem } from '@yewdiel21/motion-kit';
+import '@yewdiel21/motion-kit/css';
+
+const items: DrilldownMenuItem[] = [
+  {
+    id: 'project', label: 'Project', description: 'Manage your workspace',
+    children: [{
+      id: 'share', label: 'Share',
+      children: [
+        { id: 'link', label: 'Copy link', description: 'Anyone with the link can view' },
+        { id: 'invite', label: 'Invite people', disabled: true },
+      ],
+    }],
+  },
+  { id: 'help', label: 'Help' },
+];
+
+const menu = createDrilldownMenu(document.querySelector('#actions'), {
+  items,
+  label: 'Workspace actions',
+  onSelect: (item, path) => console.log(item.label, path),
+  onPathChange: (path) => console.log('Level', path),
+});
+
+menu.open('project');
+menu.open('share');
+menu.back();
+menu.root(); // reset() also returns to the root
+menu.setPath(['project', 'share']);
+menu.setItems(items);
+menu.update({ label: 'Quick actions', emptyText: 'No available actions' });
+// When the component is removed:
+menu.destroy();
+```
+
+Use `@yewdiel21/motion-kit/css/components/drilldown-menu` for just this component's styles; theme tokens must already be present. The root needs `mk-drilldown-menu`; the custom element receives the same styles directly.
+
+## React
+
+```tsx
+import { useState } from 'react';
+import { DrilldownMenu } from '@yewdiel21/motion-kit/react';
+import type { DrilldownMenuItem } from '@yewdiel21/motion-kit';
+
+function Actions({ items }: { items: DrilldownMenuItem[] }) {
+  const [path, setPath] = useState<string[]>([]);
+  const [selection, setSelection] = useState('Choose an action');
+  return <>
+    <DrilldownMenu
+      items={items}
+      label="Workspace actions"
+      path={path}
+      onPathChange={setPath}
+      onSelect={(item) => setSelection(item.label)}
+    />
+    <p role="status">{selection}</p>
+  </>;
+}
+```
+
+Omit `path` for internal navigation; use `defaultPath` to choose its initial level. Passing `path` makes navigation controlled: `onPathChange` requests the next branch path, and the parent accepts it by updating the prop. A parent that keeps the previous path declines the request. Invalid paths are safely truncated to their valid prefix. Updating `items` retains a valid path and focused action; removing or disabling an ancestor returns to the nearest valid parent and reports the repaired path.
+
+`DrilldownMenuProps` also accepts normal `<div>` attributes, excluding children and the native `onSelect`. A forwarded `DrilldownMenuHandle` exposes `open`, `back`, `root`, `reset`, `setPath`, and `focusItem`. In controlled mode the `path` prop remains authoritative over ref-driven navigation.
+
+## Custom element
+
+```ts
+import { defineDrilldownMenu, type MkDrilldownMenuElement } from '@yewdiel21/motion-kit/elements';
+defineDrilldownMenu(); // safe to call more than once
+
+const element = document.querySelector<MkDrilldownMenuElement>('mk-drilldown-menu')!;
+element.items = items; // may also be assigned before connection
+element.path = ['project'];
+element.addEventListener('mk:select', (event) => {
+  console.log((event as CustomEvent).detail); // { item, path }
+});
+```
+
+```html
+<mk-drilldown-menu
+  label="Workspace actions"
+  back-label="Previous level"
+  empty-text="No available actions"
+  items='[{"id":"project","label":"Project","children":[{"id":"share","label":"Share","children":[{"id":"link","label":"Copy link"}]}]}]'
+  path='["project"]'
+></mk-drilldown-menu>
+```
+
+`items` and `path` attributes accept JSON arrays and update the live instance; malformed JSON leaves the last valid value intact. `items`/`path` properties and `setItems`/`setPath` methods accept arrays directly. `open`, `back`, `root`, `reset`, and `focusItem` forward to the live engine. The `instance` property is null while disconnected. Reconnecting creates a fresh instance from the current attributes/properties. The element uses light DOM, so inherited themes apply.
+
+## Data and API
+
+```ts
+interface DrilldownMenuItem {
+  id: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: DrilldownMenuItem[];
+}
+```
+
+IDs must be unique among siblings. The same ID may appear in unrelated levels. A `children` array marks a branch; `children: []` opens an empty level. An item without children is an action. Labels/descriptions are inserted as text; they never execute HTML. Input data and returned item arrays are copied, so the engine does not mutate application data. Supply finite, acyclic data.
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `items` | `[]` | Root actions and branches |
+| `path` | `[]` | Initial branch IDs (engine); controlled branch IDs (React) |
+| `label` | `Actions` | Root heading and accessible menu name |
+| `backLabel` | `Back` | Accessible name of the back button |
+| `emptyText` | `No actions available` | Empty-level status |
+| `onSelect(item, path)` | — | Leaf action and full ID path, including the leaf |
+| `onPathChange(path)` | — | User/programmatic navigation or a repaired data path |
+
+`DrilldownMenuInstance` exposes:
+
+| Member | Behavior |
+| --- | --- |
+| `open(id): boolean` | Opens a current-level enabled branch and focuses its first action |
+| `back(): boolean` | Returns one level and restores focus to its parent branch |
+| `root()` / `reset()` | Returns to the root; keeps focus inside if it was inside |
+| `setPath(path, notify = false)` | Navigates to a valid prefix; optional path callback/event |
+| `setItems(items)` | Replaces root data, repairs invalid paths and preserves focus |
+| `update(options)` | Updates data, path, text and callbacks together |
+| `focusItem(id)` | Focuses an enabled current-level item |
+| `path` | Copy of the current branch ID path |
+| `items` | Copy of the current level's items |
+| `element` | Original root element |
+| `destroy()` | Cancels motion, removes listeners, restores original child nodes/attributes; idempotent |
+
+`open`, `back`, `root`, and `reset` notify on a changed path. Explicit `setPath` and `update({ path })` are silent by default. `setItems` reports a path repaired by removed/disabled/non-branch ancestors. `mk:path-change` bubbles with `{ path }`; `mk:select` bubbles with `{ item, path }`. Callbacks receive the same information. Choosing an action leaves the menu at its current level.
+
+## Keyboard and accessibility
+
+The current level has `role="menu"`, named by its visible header. Each action is a button with `role="menuitem"`; its label provides its accessible name and its description is referenced separately. Branches expose `aria-haspopup="menu"`. Disabled actions use both native `disabled` and `aria-disabled` and are skipped by focus navigation. Header/back and ancestor breadcrumbs sit outside the menu. The current breadcrumb uses `aria-current="location"`.
+
+| Key | Action |
+| --- | --- |
+| Up / Down | Previous / next enabled item, wrapping |
+| Home / End | First / last enabled item |
+| Enter / Space | Open branch or choose leaf action |
+| Right | Open a focused branch |
+| Left / Escape | Return one level and focus the branch you came from |
+| Tab / Shift+Tab | Normal page navigation through header/crumb controls and one roving menu stop |
+
+At the root, Left/Escape are left available to a containing surface. Empty and all-disabled levels keep the menu itself focusable so the back keys work. The initial render does not take focus; opening a branch intentionally focuses the new level. Updates preserve focus only when focus was already inside. Reduced-motion users receive immediate navigation without slide, blur or animated height.
+
+## Styling
+
+The component inherits `--mk-text`, `--mk-muted`, `--mk-surface-1`, `--mk-surface-3`, `--mk-outline-soft`, and `--mk-accent`. Override `--mk-drilldown-radius` (28 px) and `--mk-drilldown-item-radius` (18 px) for corner shapes. Width is fluid up to 26 rem; override `max-width` on the root for wider panels. Labels wrap, breadcrumbs wrap, and descriptions remain readable in narrow surfaces.
+
+This is an inline hierarchical action menu. Place it in an existing dialog/popover if you need an anchored or dismissible surface. It does not route to URLs, fetch children, virtualize data, or provide typeahead.