@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/src/components/bidirectional-slider/engine.ts

@@ -0,0 +1,289 @@
+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 { press } from '../../motion/micro';
+
+/*
+ * Bidirectional slider: a value either side of an origin (−100…100 around 0 by
+ * default), for volume, balance, exposure or a correction. The fill grows from
+ * the origin towards the thumb in the "less" or "more" colour; crossing the
+ * origin pops its notch; reaching an end bumps that end's icon. Dragging past
+ * an end stretches the track like rubber (up to 4 %) and it springs back when
+ * let go. The − and + buttons step it (held, they repeat), a double click
+ * glides back to the origin, and a bubble shows the signed value while it is
+ * held or focused. Keys, the buttons and setValue glide on the swatch curve
+ * (.38,.49,0,1.5); dragging follows the pointer. Built on a native
+ * <input type="range"> (keyboard, touch, forms and assistive tech).
+ */
+
+export interface BidirectionalSliderOptions {
+  /** Default −100. */
+  min?: number;
+  /** Default 100. */
+  max?: number;
+  /** Where the fill starts (default 0, kept inside min…max). */
+  origin?: number;
+  step?: number;
+  value?: number;
+  disabled?: boolean;
+  name?: string;
+  /** Accessible name of the input. */
+  label?: string;
+  /** The end icons: − and + (default), the speaker, or none. */
+  icons?: 'signs' | 'volume' | false;
+  /** Text for the bubble and aria-valuetext (default: signed, "+24", "−12"). */
+  formatValue?: (value: number) => string;
+  onInput?: (value: number) => void;
+  onChange?: (value: number) => void;
+}
+
+export interface BidirectionalSliderInstance extends Instance {
+  setValue(value: number, notify?: boolean): void;
+  /** Back to the origin. */
+  reset(notify?: boolean): void;
+  readonly value: number;
+}
+
+const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+const ICONS = {
+  signs: ['<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12"/></svg>', '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12M12 6v12"/></svg>'],
+  volume: [
+    '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5"/></svg>',
+    '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5"/><path d="M18 7a7 7 0 0 1 0 10"/></svg>',
+  ],
+} as const;
+
+export function createBidirectionalSlider(root: HTMLElement | null, options: BidirectionalSliderOptions = {}): BidirectionalSliderInstance {
+  if (!root) return inert({ setValue() {}, reset() {}, value: 0 });
+  registerMotion();
+  const scope = createScope();
+  const min = finite(options.min) ? options.min : -100;
+  const max = finite(options.max) && options.max > min ? options.max : Math.max(min + 1, 100);
+  const origin = Math.min(max, Math.max(min, finite(options.origin) ? options.origin : 0));
+  const step = finite(options.step) && options.step > 0 ? options.step : 1;
+  const decimals = (String(step).split('.')[1] ?? '').length;
+  const snap = (n: number) => Number(Math.min(max, Math.max(min, Math.round((n - min) / step) * step + min)).toFixed(decimals));
+  const format =
+    options.formatValue ??
+    ((n: number) => {
+      const delta = Number((n - origin).toFixed(decimals));
+      const text = new Intl.NumberFormat(undefined, { maximumFractionDigits: decimals }).format(Math.abs(delta));
+      return delta > 0 ? `+${text}` : delta < 0 ? `−${text}` : text;
+    });
+
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, parent: Element, data: string) => {
+    const element = document.createElement(tag);
+    element.setAttribute(`data-mk-bislider-${data}`, '');
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const icons = options.icons === false ? null : ICONS[options.icons ?? 'signs'];
+  const less = icons ? made('button', root, 'less') : null;
+  const track = made('span', root, 'track');
+  const more = icons ? made('button', root, 'more') : null;
+  if (less && more && icons) {
+    less.type = more.type = 'button';
+    less.tabIndex = more.tabIndex = -1;
+    less.innerHTML = icons[0];
+    more.innerHTML = icons[1];
+    less.setAttribute('aria-label', 'Menos');
+    more.setAttribute('aria-label', 'Más');
+    root.prepend(less);
+  }
+  // The fill and notch are clipped to the track's corners; the thumb and bubble are not.
+  const clip = made('span', track, 'clip');
+  clip.setAttribute('aria-hidden', 'true');
+  const fill = made('span', clip, 'fill');
+  const notch = made('span', clip, 'notch');
+  const thumb = made('span', track, 'thumb');
+  const bubble = made('span', track, 'bubble');
+  for (const part of [fill, notch, thumb, bubble]) part.setAttribute('aria-hidden', 'true');
+
+  let input = root.querySelector<HTMLInputElement>('input[type="range"]');
+  if (input) {
+    // An authored input goes into the track and back to its place (with its attributes) on destroy.
+    const kept = input;
+    const place = { parent: kept.parentNode, next: kept.nextSibling };
+    const saved = ['min', 'max', 'step', 'value', 'data-mk-bislider-input'].map((name) => [name, kept.getAttribute(name)] as const);
+    const value = kept.value;
+    scope.add(() => {
+      for (const [name, was] of saved) {
+        if (was === null) kept.removeAttribute(name);
+        else kept.setAttribute(name, was);
+      }
+      kept.value = value;
+      place.parent?.insertBefore(kept, place.next);
+    });
+  } else {
+    input = document.createElement('input');
+    input.type = 'range';
+    scope.add(() => input!.remove());
+  }
+  const range = input;
+  track.append(range);
+  range.dataset.mkBisliderInput = '';
+  range.min = String(min);
+  range.max = String(max);
+  range.step = String(step);
+  if (options.name) scope.attr(range, 'name', options.name);
+  if (options.label && !range.getAttribute('aria-label')) scope.attr(range, 'aria-label', options.label);
+  if (options.disabled) scope.attr(range, 'disabled', '');
+  const start = snap(finite(options.value) ? options.value : range.getAttribute('value') !== null ? Number(range.getAttribute('value')) : origin);
+  range.value = String(start);
+  range.defaultValue = String(start);
+  scope.attr(root, 'data-mk-ready', '');
+
+  let value = start;
+  let committed = start;
+  /** What is drawn (trails the value while gliding). */
+  const shown = { v: start };
+  const pct = (n: number) => ((n - min) / (max - min)) * 100;
+  notch.style.left = `${pct(origin)}%`;
+
+  const paint = () => {
+    const at = pct(shown.v);
+    const from = pct(origin);
+    fill.style.left = `${Math.min(at, from)}%`;
+    fill.style.width = `${Math.abs(at - from)}%`;
+    thumb.style.left = `${at}%`;
+    bubble.style.left = `${at}%`;
+    root.setAttribute('data-mk-side', shown.v > origin ? 'more' : shown.v < origin ? 'less' : 'origin');
+  };
+  scope.add(() => root.removeAttribute('data-mk-side'));
+  const describe = () => {
+    const text = format(value);
+    bubble.textContent = text;
+    range.setAttribute('aria-valuetext', text);
+  };
+  scope.add(() => range.removeAttribute('aria-valuetext'));
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    gsap.killTweensOf(shown);
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  const bump = (element: Element | null, scale = 1.25) => {
+    if (!element || reduced()) return;
+    keep(gsap.fromTo(element, { scale }, { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.4)', overwrite: 'auto' }));
+  };
+
+  let held = false;
+  /** Set the value; `glide` tweens the drawing, else it follows at once. */
+  const set = (next: number, glide: boolean, notify: 'input' | 'change' | false) => {
+    const before = value;
+    value = snap(next);
+    range.value = String(value);
+    describe();
+    gsap.killTweensOf(shown);
+    if (glide && !reduced()) keep(gsap.to(shown, { v: value, duration: 0.45, ease: EASE.swatch, onUpdate: paint }));
+    else {
+      shown.v = value;
+      paint();
+    }
+    // Crossing the origin pops its notch; arriving at an end bumps that end's icon.
+    if ((before - origin) * (value - origin) < 0 || (before !== origin && value === origin)) bump(notch, 1.8);
+    if (value !== before && value === max) bump(more);
+    if (value !== before && value === min) bump(less);
+    if (notify && value !== before) {
+      options.onInput?.(value);
+      root.dispatchEvent(new CustomEvent('mk:input', { bubbles: true, detail: { value } }));
+    }
+    if (notify === 'change') commit();
+  };
+  const commit = () => {
+    if (value === committed) return;
+    committed = value;
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value } }));
+  };
+
+  scope.on(range, 'input', () => {
+    const next = Number(range.value);
+    const before = value;
+    set(next, !held, false);
+    if (value !== before) {
+      options.onInput?.(value);
+      root.dispatchEvent(new CustomEvent('mk:input', { bubbles: true, detail: { value } }));
+    }
+  });
+  scope.on(range, 'change', commit);
+  scope.on(range, 'dblclick', () => set(origin, true, 'change'));
+
+  // Held: the thumb grows and the bubble shows; past an end, the track stretches like rubber.
+  let pointer: number | null = null;
+  scope.on(range, 'pointerdown', (event) => {
+    const down = event as PointerEvent;
+    if (range.disabled || down.button !== 0) return;
+    held = true;
+    pointer = down.pointerId;
+    root.setAttribute('data-mk-held', '');
+  });
+  scope.on(window, 'pointermove', (event) => {
+    const move = event as PointerEvent;
+    if (!held || move.pointerId !== pointer || reduced()) return;
+    const box = track.getBoundingClientRect();
+    const over = move.clientX > box.right ? move.clientX - box.right : move.clientX < box.left ? move.clientX - box.left : 0;
+    const stretch = Math.min(1, Math.abs(over) / 80) * 0.04;
+    gsap.set(track, { scaleX: 1 + stretch, transformOrigin: over > 0 ? '0% 50%' : '100% 50%' });
+  });
+  const release = (event: Event) => {
+    if (!held || (event as PointerEvent).pointerId !== pointer) return;
+    held = false;
+    pointer = null;
+    root.removeAttribute('data-mk-held');
+    if (!reduced()) keep(gsap.to(track, { scaleX: 1, duration: 0.6, ease: 'elastic.out(1, 0.35)', clearProps: 'transform,transformOrigin' }));
+  };
+  scope.on(window, 'pointerup', release);
+  scope.on(window, 'pointercancel', release);
+  scope.add(() => {
+    root.removeAttribute('data-mk-held');
+    gsap.set(track, { clearProps: 'transform,transformOrigin' });
+  });
+
+  // − and +: a step per press, repeating while held.
+  let repeat: ReturnType<typeof setTimeout> | undefined;
+  const stop = () => {
+    clearTimeout(repeat);
+    if (repeat !== undefined) commit();
+    repeat = undefined;
+  };
+  scope.add(() => clearTimeout(repeat));
+  for (const [button, direction] of [[less, -1], [more, 1]] as const) {
+    if (!button) continue;
+    scope.on(button, 'pointerdown', (event) => {
+      if (range.disabled || (event as PointerEvent).button !== 0) return;
+      event.preventDefault();
+      press(button);
+      const tick = (delay: number) => {
+        set(value + step * direction, true, 'input');
+        repeat = setTimeout(() => tick(Math.max(50, delay * 0.8)), delay);
+      };
+      tick(400);
+    });
+    scope.on(button, 'pointerup', stop);
+    scope.on(button, 'pointerleave', stop);
+    scope.on(button, 'pointercancel', stop);
+  }
+  const form = range.form;
+  if (form) scope.on(form, 'reset', () => setTimeout(() => set(Number(range.defaultValue), true, false)));
+
+  describe();
+  paint();
+
+  return {
+    setValue: (next, notify = false) => set(next, true, notify ? 'change' : false),
+    reset: (notify = false) => set(origin, true, notify ? 'change' : false),
+    get value() {
+      return value;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/bidirectional-slider/react.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createBidirectionalSlider, type BidirectionalSliderInstance, type BidirectionalSliderOptions } from './engine';
+
+export interface BidirectionalSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'>, BidirectionalSliderOptions {
+  instanceRef?: MutableRefObject<BidirectionalSliderInstance | null>;
+}
+
+/** <BidirectionalSlider label="Volumen" icons="volume" value={volume} onChange={setVolume} /> */
+export function BidirectionalSlider({ min, max, origin, step, value, disabled, name, label, icons, formatValue, onInput, onChange, instanceRef, className, ...props }: BidirectionalSliderProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const format = useLatest(formatValue);
+  const instance = useRef<BidirectionalSliderInstance | null>(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBidirectionalSlider(ref.current, {
+      min,
+      max,
+      origin,
+      step,
+      value,
+      disabled,
+      name,
+      label,
+      icons,
+      formatValue: formatValue ? (n) => format.current!(n) : undefined,
+      onInput: (n) => input.current?.(n),
+      onChange: (n) => change.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
+  }, [min, max, origin, step, disabled, name, label, icons]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== undefined && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return <div {...props} ref={ref} className={['mk-bidirectional-slider', className].filter(Boolean).join(' ')} />;
+}

package/src/components/chart/README.md

@@ -1,5 +1,15 @@
 # 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

package/src/components/chart/element.ts

@@ -18,6 +18,8 @@ export class MkChartElement extends MkElement<ChartInstance> {
     emptyLabel: 'string',
     legend: 'boolean',
     tooltip: 'boolean',
+    axis: 'boolean',
+    endLabel: 'boolean',
   };
 
   protected create(options: Record<string, unknown>) {

package/src/components/chart/engine.ts

@@ -18,7 +18,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
  * table carries every value for screen readers. Resizes with its container.
  */
 
-export type ChartType = 'line' | 'area' | 'bar';
+export type ChartType = 'line' | 'area' | 'bar' | 'composed';
 
 export interface ChartPoint {
   label: string;
@@ -29,6 +29,10 @@ export interface ChartSeries {
   name: string;
   /** One value per label; null is a gap (no data). */
   values: Array<number | null>;
+  /** Per-series mark in a composed chart (default line). */
+  type?: 'line' | 'area' | 'bar';
+  /** An area's lower boundary; values is the upper boundary. Nulls leave gaps. */
+  lowerValues?: Array<number | null>;
   /** Any CSS colour; default: monochrome for one series, else the --mk-chart-N slot. */
   color?: string;
   /** Lines: an SVG dash pattern, e.g. '5 5' (a pace or goal) or '1 6' (a projection). */
@@ -116,6 +120,8 @@ function modelOf(options: ChartOptions): Model {
     values: Array.from({ length: count }, (_, j) => (finite(series.values[j]) ? series.values[j]! : null)),
     color: series.color ?? (mono ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)'),
     dash: series.dash,
+    type: series.type,
+    lowerValues: series.lowerValues ? Array.from({ length: count }, (_, j) => finite(series.lowerValues![j]) ? series.lowerValues![j]! : null) : undefined,
   }));
   return { labels: fullLabels, series };
 }
@@ -171,7 +177,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
   let cursor: SVGGElement | null = null;
   let band: SVGRectElement | null = null;
   /** What is drawn now: values and domain (they trail the model while gliding). */
-  let shown: { values: Values; lo: number; hi: number; type: ChartType; stacked: boolean } | null = null;
+  let shown: { values: Values; lower: Values; lo: number; hi: number; type: ChartType; stacked: boolean } | null = null;
   let glide: gsap.core.Tween | null = null;
   const effects = new Set<gsap.core.Animation>();
   const keep = (animation: gsap.core.Animation) => {
@@ -190,7 +196,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     if (options.formatValue) return options.formatValue(value);
     return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
   };
-  const type = (): ChartType => (options.type === 'bar' || options.type === 'area' ? options.type : 'line');
+  const type = (): ChartType => (options.type === 'bar' || options.type === 'area' || options.type === 'composed' ? options.type : 'line');
+  const seriesType = (index: number) => type() === 'composed' ? model.series[index]!.type ?? 'line' : type();
+  const hasBars = () => model.series.some((_, index) => seriesType(index) === 'bar');
   const stacked = () => type() === 'bar' && Boolean(options.stacked) && model.series.length > 1;
   const hasData = () => model.labels.length > 0 && model.series.some((series) => series.values.some(finite));
 
@@ -206,6 +214,13 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     return { up, down };
   };
   const targetValues = (): Values => model.series.map((series) => series.values);
+  const lowerValues = (): Values => model.series.map((series) => series.lowerValues ?? []);
+  const rangeText = (series: Model['series'][number], index: number) => {
+    const value = series.values[index];
+    const lower = series.lowerValues?.[index];
+    if (!finite(value)) return '—';
+    return finite(lower) ? `${format(lower)} – ${format(value)}` : format(value);
+  };
   const totals = (index: number) => totalsOf(targetValues(), index);
 
   const domainOf = (values: Values) => {
@@ -224,6 +239,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
           lo = Math.min(lo, value);
         }
       }
+      for (const list of lowerValues()) {
+        if (finite(list[i])) { lo = Math.min(lo, list[i]!); hi = Math.max(hi, list[i]!); }
+      }
     });
     if (hi === lo) hi = lo + 1;
     const step = niceStep((hi - lo) / 4);
@@ -272,7 +290,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       for (const series of model.series) {
         const td = document.createElement('td');
         const value = series.values[i];
-        td.textContent = finite(value) ? format(value) : '—';
+        td.textContent = rangeText(series, i);
         row.append(td);
       }
       if (stacked()) {
@@ -291,11 +309,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const show = options.legend ?? model.series.length > 1;
     legend.hidden = !show || !hasData();
     if (legend.hidden) return;
-    for (const series of model.series) {
+    for (const [index, series] of model.series.entries()) {
       const item = document.createElement('li');
       const swatch = document.createElement('span');
       swatch.dataset.mkChartSwatch = '';
-      swatch.dataset.mkType = type();
+      swatch.dataset.mkType = seriesType(index);
       swatch.style.background = series.color;
       swatch.style.color = series.color;
       if (series.dash) swatch.dataset.mkDash = '';
@@ -314,19 +332,19 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
   };
 
   /** Draw `values` on the domain lo…hi (called every frame while gliding). */
-  const paint = (values: Values, lo: number, hi: number, step: number) => {
+  const paint = (values: Values, lo: number, hi: number, step: number, lower: Values = lowerValues()) => {
     canvas.replaceChildren();
     const width = Math.max(120, Math.round(plot.clientWidth || root.clientWidth || 600));
     const height = Math.max(80, Math.round(finite(options.height) ? options.height : 240));
     canvas.setAttribute('viewBox', `0 0 ${width} ${height}`);
     canvas.setAttribute('width', String(width));
     canvas.setAttribute('height', String(height));
-    const bar = type() === 'bar';
+    const bar = hasBars();
     const axis = Boolean(options.axis);
     const ticks: number[] = [];
     for (let t = lo; t <= hi + step / 2; t += step) ticks.push(Number(t.toPrecision(12)));
     const tickText = ticks.map(format);
-    const withEnd = !bar && options.endLabel !== false && lastPoint(values[0]) >= 0;
+    const withEnd = seriesType(0) !== 'bar' && options.endLabel !== false && lastPoint(values[0]) >= 0;
     const left = axis ? Math.min(96, Math.max(28, Math.max(...tickText.map((text) => text.length)) * 7 + 12)) : 4;
     const top = 16;
     const right = withEnd ? Math.min(120, Math.max(48, format(values[0]![lastPoint(values[0])]!).length * 7.5 + 28)) : 8;
@@ -381,7 +399,8 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const marks = svg('g', { 'data-mk-part': 'series' });
     const defs = svg('defs');
     if (bar) {
-      const groups = stacked() ? 1 : model.series.length;
+      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 totalsLayer = svg('g', { 'data-mk-part': 'totals' });
       model.labels.forEach((_, i) => {
@@ -419,9 +438,10 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
         } else {
           const groupWidth = groups * barWidth + GAP * (groups - 1);
           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 + k * (barWidth + GAP);
+            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;
             marks.append(path);
@@ -429,20 +449,23 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
         }
       });
       if (totalsLayer.childNodes.length) canvas.append(totalsLayer);
-    } else {
+    }
+    if (model.series.some((_, index) => seriesType(index) !== 'bar')) {
       values.forEach((list, k) => {
+        if (seriesType(k) === 'bar') return;
         const series = model.series[k]!;
-        const runs: Array<Array<[number, number]>> = [];
-        let run: Array<[number, number]> = [];
+        const runs: Array<Array<[number, number, number]>> = [];
+        let run: Array<[number, number, number]> = [];
         list.forEach((value, i) => {
-          if (finite(value)) run.push([xs[i]!, y(value)]);
+          const bottomValue = lower[k]?.[i];
+          if (finite(value) && (!series.lowerValues || finite(bottomValue))) run.push([xs[i]!, y(value), finite(bottomValue) ? y(bottomValue) : base]);
           else if (run.length) {
             runs.push(run);
             run = [];
           }
         });
         if (run.length) runs.push(run);
-        if (type() === 'area') {
+        if (seriesType(k) === 'area') {
           const gradient = svg('linearGradient', { id: `${uid}-fill-${k}`, x1: 0, x2: 0, y1: 0, y2: 1 });
           const stop = (offset: string, opacity: string) => {
             const element = svg('stop', { offset });
@@ -454,8 +477,8 @@ 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${round(points[points.length - 1]![0])},${round(base)}L${round(points[0]![0])},${round(base)}Z`;
-            const area = svg('path', { d, 'data-mk-part': 'area' });
+            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 area = svg('path', { d, 'data-mk-part': 'area', 'data-mk-series': k });
             area.style.fill = `url(#${uid}-fill-${k})`;
             marks.append(area);
           }
@@ -479,7 +502,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       });
       // The last value of the first series: a ringed point and its pill.
       const last = lastPoint(values[0]);
-      if (last >= 0 && !model.series[0]!.dash) {
+      if (last >= 0 && seriesType(0) !== 'bar' && !model.series[0]!.dash) {
         const point = svg('circle', { cx: round(xs[last]!), cy: round(y(values[0]![last]!)), r: 5, 'data-mk-part': 'end' });
         point.style.fill = model.series[0]!.color;
         marks.append(point);
@@ -564,10 +587,10 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       const name = document.createElement('span');
       name.textContent = series.name;
       const amount = document.createElement('b');
-      amount.textContent = finite(value) ? format(value) : '—';
+      amount.textContent = rangeText(series, i);
       row.append(swatch, name, amount);
       tooltip.append(row);
-      rows.push(`${series.name ? `${series.name}: ` : ''}${finite(value) ? format(value) : 'sin dato'}`);
+      rows.push(`${series.name ? `${series.name}: ` : ''}${finite(value) ? rangeText(series, i) : 'sin dato'}`);
     }
     if (stacked()) {
       const { up, down } = totals(i);
@@ -640,7 +663,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const target = targetValues();
     const domain = domainOf(target);
     const finish = () => {
-      shown = { values: target, lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
+      shown = { values: target, lower: lowerValues(), lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
       paint(target, domain.lo, domain.hi, domain.step);
       paintSelection(false);
     };
@@ -660,7 +683,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             const before = from.values[k]![i];
             return finite(value) && finite(before) ? before + (value - before) * t : value;
           }));
-          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step);
+          const lower = lowerValues().map((list, k) => list.map((value, i) => {
+            const before = from.lower[k]?.[i];
+            return finite(value) && finite(before) ? before + (value - before) * t : value;
+          }));
+          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step, lower);
           paintSelection(false);
         },
         onComplete: () => {