@yewdiel21/motion-kit 0.15.0 → 0.16.0

package/dist/{reduced-6X_bns60.d.ts → reduced-DQwVXQYb.d.ts}

@@ -1,4 +1,4 @@
-import { bY as MenuOptions, bX as MenuInstance, bd as DialogOptions, bb as DialogInstance, cv as RevealSpeed } from './reveal-BfyKKsw4.js';
+import { bY as MenuOptions, bX as MenuInstance, bd as DialogOptions, bb as DialogInstance, cv as RevealSpeed } from './reveal-DRpNO4KP.js';
 import { I as Instance } from './types-BkS_raL8.js';
 import { SplitText } from 'gsap/SplitText';
 

package/dist/{reveal-BfyKKsw4.d.ts → reveal-DRpNO4KP.d.ts}

@@ -780,6 +780,16 @@ 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;
@@ -2102,6 +2112,8 @@ interface ScrollIslandOptions {
     reach?: number;
     /** ms the bar stays after scrolling stops (default 900). */
     idle?: number;
+    /** Keep the thin bar visible while idle (default false). */
+    persistent?: boolean;
     /** Follow the page's scroll (default: when the root is <html> or <body>). */
     page?: boolean;
     /** The current section changed (its heading's text, or null before the first). */

package/dist/{store-CA2Qcun_.d.ts → store-Da3zSh8Z.d.ts}

@@ -1,6 +1,6 @@
 import { I as Instance } from './types-BkS_raL8.js';
 import { Flip } from 'gsap/Flip';
-import { a3 as RevealHandle, a4 as DateInput } from './reveal-BfyKKsw4.js';
+import { a3 as RevealHandle, a4 as DateInput } from './reveal-DRpNO4KP.js';
 
 interface ThemePickerOptions {
     /** Theme ids to show, in order. Default: visible presets, or all with showHidden. */
@@ -301,6 +301,10 @@ interface RadialChartOptions {
     size?: number;
     /** Ring thickness in px (default: what fits, up to 16). */
     thickness?: number;
+    /** Discrete sectors per ring (0: continuous, default). */
+    segments?: number;
+    /** Show values (default) or progress toward the goals in the middle. */
+    center?: 'value' | 'percent';
     label?: string;
     /** The middle when nothing is chosen (default 'Total'). */
     totalLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yewdiel21/motion-kit",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Motion toolkit for vanilla, Astro and React: GSAP recipes, accessible components, 19 themes, CSS controls and optional WebGL effects.",
   "type": "module",
   "license": "UNLICENSED",

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/radial-chart/README.md

@@ -46,3 +46,13 @@ Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objeto
 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.
+
+## Medidor segmentado · 0.16
+
+```tsx
+<RadialChart sweep={180} segments={18} thickness={30} center="percent"
+  totalLabel="Crecimiento" legend={false}
+  data={[{ label: 'Ventas', value: 70.8, max: 100 }]} />
+```
+
+`segments` divide cada anillo en sectores (0 conserva el trazo continuo). `center="percent"` muestra el avance hacia la meta; por defecto muestra el valor. En HTML se usan los mismos atributos. Los datos se interpolan sobre los segmentos y conservan los valores exactos en la tabla accesible.

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

@@ -7,7 +7,7 @@ import { createRadialChart, type RadialChartInstance, type RadialChartOptions }
  * 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' };
+  static options: Record<string, OptionType> = { data: 'json', max: 'number', sweep: 'number', size: 'number', thickness: 'number', segments: 'number', center: 'string', label: 'string', totalLabel: 'string', legend: 'boolean', emptyLabel: 'string' };
 
   protected create(options: Record<string, unknown>) {
     return createRadialChart(this, options as RadialChartOptions);
@@ -15,7 +15,7 @@ export class MkRadialChartElement extends MkElement<RadialChartInstance> {
 
   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) });
+    this.instance.update({ legend: undefined, max: undefined, segments: 0, center: undefined, ...(this.options as RadialChartOptions) });
   }
 
   update(options: RadialChartOptions) {