@yewdiel21/motion-kit 0.14.0 → 0.16.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,24 +1,49 @@
-# chart
-
-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,11 +13,14 @@ 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',
     legend: 'boolean',
     tooltip: 'boolean',
+    axis: 'boolean',
+    endLabel: 'boolean',
   };
 
   protected create(options: Record<string, unknown>) {
@@ -26,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) {