@yewdiel21/motion-kit 0.14.0 → 0.15.0

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

@@ -0,0 +1,281 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { addDays, capitalize, dayKey, safeFormat, startOfWeek, toDate, weekdayNames, type DateInput } from '../../core/dates';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { chartFrame, finite, formatNumber, onWidth, round, svg } from '../chart/parts';
+
+/*
+ * Heatmap chart: daily activity on a calendar, a column per week like
+ * GitHub's, in chart's family. Each day is a 3 px rounded cell whose colour
+ * deepens in steps (four by default) from the track to the accent. The cells
+ * pop in along the diagonal, oldest first (.35 s, 8 ms apart); new data
+ * crossfades their colours. Pointing at a day (or the arrows: up and down a
+ * day, left and right a week, PageUp/PageDown four) lifts it with a ring and
+ * the tooltip says its value and date; the "less … more" scale lights the
+ * days of a step. Narrow screens scroll the weeks, ending on the latest.
+ */
+
+export interface HeatmapDatum {
+  date: DateInput;
+  value: number;
+}
+
+export interface HeatmapChartOptions {
+  /** Values by day: a list or a { 'YYYY-MM-DD': value } map. */
+  data?: HeatmapDatum[] | Record<string, number>;
+  /** The last day shown (default: today). */
+  end?: DateInput;
+  /** Weeks shown (default 53). */
+  weeks?: number;
+  /** First day of the week, 0 Sunday … 6 Saturday (default 1, Monday). */
+  firstDay?: number;
+  locale?: string;
+  /** Coloured steps above zero (default 4). */
+  levels?: number;
+  /** The deepest step's colour (default the accent). */
+  color?: string;
+  /** What a value counts, for the tooltip (default 'actividades'). */
+  unit?: string;
+  label?: string;
+  /** The "less … more" scale (default true). */
+  legend?: boolean;
+  formatValue?: (value: number) => string;
+  emptyLabel?: string;
+  onSelect?: (date: string | null, value: number | null) => void;
+}
+
+export interface HeatmapChartInstance extends Instance {
+  update(options: HeatmapChartOptions): void;
+  /** Choose a day ('YYYY-MM-DD') or none. */
+  select(date: string | null): void;
+  readonly selected: string | null;
+}
+
+const LEFT = 28;
+const TOP = 18;
+
+export function createHeatmapChart(root: HTMLElement | null, initial: HeatmapChartOptions = {}): HeatmapChartInstance {
+  if (!root) return inert({ update() {}, select() {}, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, 'heatmap');
+  const { plot, canvas, keep } = frame;
+  let options: HeatmapChartOptions = { ...initial };
+  let selected: number | null = null;
+
+  // The weeks scroll inside the plot; the tooltip stays over it, unclipped.
+  const scroller = document.createElement('div');
+  scroller.dataset.mkHeatmapScroll = '';
+  plot.prepend(scroller);
+  scroller.append(canvas);
+  scope.add(() => scroller.remove());
+
+  const scale = document.createElement('div');
+  scale.dataset.mkHeatmapScale = '';
+  scale.setAttribute('aria-hidden', 'true');
+  root.insertBefore(scale, frame.legend);
+  scope.add(() => scale.remove());
+
+  const locale = () => options.locale ?? (document.documentElement.lang || 'es');
+  const format = (value: number) => (options.formatValue ? options.formatValue(value) : formatNumber(value));
+  const levels = () => Math.max(1, Math.min(8, Math.round(options.levels ?? 4)));
+
+  const modelOf = () => {
+    const values = new Map<string, number>();
+    const add = (key: string, value: number) => finite(value) && values.set(key, (values.get(key) ?? 0) + value);
+    if (Array.isArray(options.data)) for (const datum of options.data) add(dayKey(toDate(datum.date)), datum.value);
+    else if (options.data) for (const [key, value] of Object.entries(options.data)) add(dayKey(toDate(key)), value);
+    const weeks = Math.max(1, Math.min(106, Math.round(options.weeks ?? 53)));
+    const firstDay = Number.isInteger(options.firstDay) && options.firstDay! >= 0 && options.firstDay! <= 6 ? options.firstDay! : 1;
+    const end = toDate(options.end ?? new Date());
+    const start = startOfWeek(addDays(end, -(weeks - 1) * 7), firstDay);
+    const days: Array<{ key: string; date: Date; value: number; week: number; day: number }> = [];
+    for (let date = start, i = 0; date <= end; date = addDays(date, 1), i++) {
+      const key = dayKey(date);
+      days.push({ key, date, value: values.get(key) ?? 0, week: Math.floor(i / 7), day: i % 7 });
+    }
+    const max = Math.max(0, ...days.map((each) => each.value));
+    return { days, weeks: (days[days.length - 1]?.week ?? 0) + 1, firstDay, max, total: days.reduce((sum, each) => sum + each.value, 0) };
+  };
+  let model = modelOf();
+  const levelOf = (value: number) => (value <= 0 || !model.max ? 0 : Math.max(1, Math.ceil((value / model.max) * levels())));
+  const fillOf = (level: number) => (level === 0 ? 'var(--mk-heatmap-empty)' : `color-mix(in srgb, ${options.color ?? 'var(--mk-heatmap-color)'} ${Math.round(22 + (78 * level) / levels())}%, var(--mk-heatmap-empty))`);
+
+  let cells: SVGRectElement[] = [];
+  /** The first day drawn: the same days keep their cells. */
+  let builtFrom = '';
+  let geometry = { cell: 12, gap: 3, width: 0, height: 0 };
+  const longDate = () => safeFormat(locale(), { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' });
+
+  const build = (animate: boolean) => {
+    canvas.replaceChildren();
+    const available = Math.max(0, (plot.clientWidth || root.clientWidth || 0) - LEFT);
+    const gap = 3;
+    // Cells fill the width between 10 and 14 px; past that the weeks scroll.
+    const fit = available ? Math.floor(available / model.weeks - gap) : 12;
+    const cell = Math.max(10, Math.min(14, fit));
+    const width = LEFT + model.weeks * (cell + gap);
+    const height = TOP + 7 * (cell + gap);
+    geometry = { cell, gap, width, height };
+    canvas.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    canvas.setAttribute('width', String(width));
+    canvas.setAttribute('height', String(height));
+    plot.style.setProperty('--mk-heatmap-width', `${width}px`);
+
+    // Month names over the week where each month starts; weekday names on every other row.
+    const months = svg('g', { 'data-mk-part': 'months' });
+    const monthName = safeFormat(locale(), { month: 'short' });
+    let last = -1;
+    for (const each of model.days) {
+      if (each.day !== 0) continue;
+      const month = addDays(each.date, 6).getMonth();
+      if (month === last) continue;
+      last = month;
+      if (each.week > model.weeks - 2 && model.weeks > 4) continue;
+      const text = svg('text', { x: LEFT + each.week * (cell + gap), y: 10 });
+      text.textContent = capitalize(monthName.format(addDays(each.date, 6)).replace('.', ''));
+      months.append(text);
+    }
+    const names = weekdayNames(locale(), model.firstDay, 'short');
+    const weekdays = svg('g', { 'data-mk-part': 'weekdays' });
+    [1, 3, 5].forEach((row) => {
+      const text = svg('text', { x: 0, y: round(TOP + row * (cell + gap) + cell / 2), 'dominant-baseline': 'middle' });
+      text.textContent = capitalize(names[row]!.replace('.', '')).slice(0, 3);
+      weekdays.append(text);
+    });
+    const grid = svg('g', { 'data-mk-part': 'cells' });
+    cells = model.days.map((each, i) => {
+      const rect = svg('rect', { x: LEFT + each.week * (cell + gap), y: TOP + each.day * (cell + gap), width: cell, height: cell, rx: 3, 'data-mk-index': i, 'data-mk-level': levelOf(each.value) });
+      rect.style.fill = fillOf(levelOf(each.value));
+      grid.append(rect);
+      return rect;
+    });
+    canvas.append(months, weekdays, grid);
+    builtFrom = model.days[0]?.key ?? '';
+    // The latest weeks in view when they scroll.
+    scroller.scrollLeft = scroller.scrollWidth;
+    if (animate && !reduced()) keep(gsap.fromTo(cells, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, duration: 0.35, ease: EASE.pop, clearProps: 'opacity,transform', stagger: (i: number) => Math.min(0.7, (model.days[i]!.week + model.days[i]!.day) * 0.008) }));
+  };
+  scope.add(() => plot.style.removeProperty('--mk-heatmap-width'));
+
+  const paintScale = () => {
+    scale.replaceChildren();
+    scale.hidden = options.legend === false || !model.days.length;
+    if (scale.hidden) return;
+    const less = document.createElement('span');
+    less.textContent = 'Menos';
+    scale.append(less);
+    for (let level = 0; level <= levels(); level++) {
+      const swatch = document.createElement('i');
+      swatch.style.background = fillOf(level);
+      swatch.addEventListener('pointerenter', () => {
+        for (const cell of cells) cell.toggleAttribute('data-mk-dim', cell.getAttribute('data-mk-level') !== String(level));
+      });
+      swatch.addEventListener('pointerleave', () => {
+        for (const cell of cells) cell.removeAttribute('data-mk-dim');
+      });
+      scale.append(swatch);
+    }
+    const more = document.createElement('span');
+    more.textContent = 'Más';
+    scale.append(more);
+  };
+
+  const unit = () => options.unit ?? 'actividades';
+  const paintSelection = (announce: boolean) => {
+    cells.forEach((cell, i) => cell.toggleAttribute('data-mk-on', i === selected));
+    const each = selected === null ? null : model.days[selected];
+    if (!each) {
+      frame.tip(null);
+      return;
+    }
+    const { cell, gap } = geometry;
+    const x = LEFT + each.week * (cell + gap) + cell / 2 - scroller.scrollLeft;
+    const y = TOP + each.day * (cell + gap);
+    const title = capitalize(longDate().format(each.date));
+    frame.tip({ x, y, title, rows: [{ name: unit(), color: fillOf(Math.max(1, levelOf(each.value))), value: format(each.value) }] });
+    if (announce) frame.live.textContent = `${title}: ${format(each.value)} ${unit()}`;
+  };
+
+  const draw = (animate: boolean) => {
+    const name = options.label ?? 'Actividad diaria';
+    canvas.setAttribute('aria-label', model.days.length ? `${name}. ${model.weeks} semanas, ${format(model.total)} ${unit()} en total. Usa las flechas para recorrer los días.` : `${name}: ${options.emptyLabel ?? 'sin datos'}`);
+    // The days with something, for screen readers (a year of empty rows says nothing).
+    const active = model.days.filter((each) => each.value > 0);
+    frame.fillTable(`${name}: ${format(model.total)} ${unit()}`, ['Día', capitalize(unit())], active.map((each) => [capitalize(longDate().format(each.date)), format(each.value)]));
+    frame.fillLegend([], false);
+    paintScale();
+    if (selected !== null && selected >= model.days.length) selected = null;
+    const same = cells.length === model.days.length && cells.length > 0 && builtFrom === model.days[0]!.key;
+    if (same && animate) {
+      // New values over the same days: the colours crossfade (CSS).
+      cells.forEach((cell, i) => {
+        const level = levelOf(model.days[i]!.value);
+        cell.setAttribute('data-mk-level', String(level));
+        cell.style.fill = fillOf(level);
+      });
+    } else build(animate);
+    paintSelection(false);
+  };
+
+  const select = (index: number | null, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.days.length ? null : Math.max(0, Math.min(model.days.length - 1, Math.round(index)));
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    const each = selected === null ? null : model.days[selected]!;
+    options.onSelect?.(each?.key ?? null, each?.value ?? null);
+    root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { date: each?.key ?? null, value: each?.value ?? null } }));
+  };
+
+  scope.on(canvas, 'pointermove', (event) => {
+    const cell = (event.target as Element).closest('[data-mk-index]');
+    select(cell ? Number(cell.getAttribute('data-mk-index')) : null);
+  });
+  scope.on(canvas, 'pointerleave', (event) => {
+    if ((event as PointerEvent).pointerType === 'mouse') select(null);
+  });
+  scope.on(canvas, 'focus', () => {
+    if (selected === null && model.days.length) select(model.days.length - 1, true);
+  });
+  scope.on(canvas, 'blur', () => select(null));
+  scope.on(canvas, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const at = selected ?? model.days.length - 1;
+    const moves: Record<string, number | null> = { ArrowUp: at - 1, ArrowDown: at + 1, ArrowLeft: at - 7, ArrowRight: at + 7, PageUp: at - 28, PageDown: at + 28, Home: 0, End: model.days.length - 1, Escape: null };
+    if (!(key in moves) || !model.days.length) return;
+    event.preventDefault();
+    select(moves[key]!, true);
+    // Keep the chosen day in view when the weeks scroll.
+    const cell = selected === null ? null : cells[selected];
+    if (cell) {
+      const x = Number(cell.getAttribute('x'));
+      if (x - scroller.scrollLeft < LEFT || x - scroller.scrollLeft > scroller.clientWidth - geometry.cell * 2) scroller.scrollLeft = x - scroller.clientWidth / 2;
+    }
+  });
+  onWidth(root, scope, () => {
+    build(false);
+    paintSelection(false);
+  });
+
+  draw(true);
+
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select(date) {
+      const index = date === null ? -1 : model.days.findIndex((each) => each.key === date);
+      select(index < 0 ? null : index);
+    },
+    get selected() {
+      return selected === null ? null : (model.days[selected]?.key ?? null);
+    },
+    destroy: () => scope.dispose(),
+  };
+}

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

@@ -0,0 +1,93 @@
+/* heatmap-chart — a week per column of 3 px rounded days, deepening from the track to the accent; needs chart.css.
+   The day under the pointer lifts with a ring; the "less … more" scale sits under it, to the right. */
+.mk-heatmap-chart,
+mk-heatmap-chart {
+  --mk-heatmap-color: var(--mk-accent);
+  --mk-heatmap-empty: var(--mk-surface-2);
+  display: grid;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+[data-mk-heatmap-scroll] {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: 4px;
+  scrollbar-width: thin;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-chart-svg] {
+  width: var(--mk-heatmap-width, auto);
+  max-width: none;
+  overflow: visible;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    fill 0.35s ease,
+    opacity 0.2s ease,
+    transform 0.3s var(--mk-ease-swatch);
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect[data-mk-on] {
+  stroke: var(--mk-text);
+  stroke-width: 1.5;
+  transform: scale(1.3);
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect[data-mk-dim] {
+  opacity: 0.25;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='months'] text,
+[data-mk-chart-type='heatmap'] [data-mk-part='weekdays'] text {
+  font-size: 10px;
+}
+
+[data-mk-heatmap-scale] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-heatmap-scale][hidden] {
+  display: none;
+}
+
+[data-mk-heatmap-scale] span {
+  margin-inline: 0.35rem;
+}
+
+[data-mk-heatmap-scale] i {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: transform 0.25s var(--mk-ease-swatch);
+}
+
+@media (hover: hover) {
+  [data-mk-heatmap-scale] i:hover {
+    transform: scale(1.25);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect,
+  [data-mk-heatmap-scale] i {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect {
+    stroke: CanvasText;
+    stroke-width: 0.5;
+  }
+}

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

@@ -0,0 +1,14 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useChart } from '../chart/use-chart';
+import { createHeatmapChart, type HeatmapChartInstance, type HeatmapChartOptions } from './engine';
+
+export interface HeatmapChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, HeatmapChartOptions {
+  instanceRef?: { current: HeatmapChartInstance | null };
+}
+
+export function HeatmapChart({ data, end, weeks, firstDay, locale, levels, color, unit, label, legend, formatValue, emptyLabel, onSelect, instanceRef, className, ...props }: HeatmapChartProps) {
+  const ref = useChart(createHeatmapChart, { data, end, weeks, firstDay, locale, levels, color, unit, label, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return <div {...props} ref={ref} className={['mk-heatmap-chart', className].filter(Boolean).join(' ')} />;
+}

package/src/components/hover-card/engine.ts

@@ -1,4 +1,5 @@
 import { requestFrame } from '../../core/frame';
+import { reduced } from '../../core/reduced';
 import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 
@@ -20,12 +21,16 @@ let sequence = 0;
 /** Distance kept from the viewport edges. */
 const EDGE = 12;
 const GAP = 12;
+/** Longest fold back into the trigger (the CSS one is .22 s); then it hides anyway. */
+const FOLD_MS = 400;
 
 /**
  * Nonmodal preview: pointer, keyboard focus and tap all reveal the same panel.
  * The panel stays inside the viewport: it flips to the other side when its own
  * has no room and shifts sideways (--mk-hover-shift) away from the edges, again
  * on scroll and resize. Opened from the keyboard it appears without the entrance.
+ * It grows out of the trigger's centre (--mk-hover-origin-x) and, when the
+ * pointer leaves, folds back into it (data-mk-closing, .22 s) before hiding.
  */
 export function createHoverCard(root: HTMLElement | null, options: HoverCardOptions = {}): HoverCardInstance {
   const trigger = root?.querySelector<HTMLElement>('[data-mk-hover-trigger]');
@@ -68,6 +73,9 @@ export function createHoverCard(root: HTMLElement | null, options: HoverCardOpti
     if (left + box.width > view.width - EDGE) shift = view.width - EDGE - box.width - left;
     if (left + shift < EDGE) shift = EDGE - left;
     if (shift) root.style.setProperty('--mk-hover-shift', `${Math.round(shift)}px`);
+    // The panel grows from (and folds back into) the trigger's centre.
+    const target = trigger.getBoundingClientRect();
+    root.style.setProperty('--mk-hover-origin-x', `${Math.round(target.left + target.width / 2 - (left + shift))}px`);
   };
   let pending: (() => void) | null = null;
   const schedulePlace = () => {
@@ -80,13 +88,34 @@ export function createHoverCard(root: HTMLElement | null, options: HoverCardOpti
   scope.add(() => pending?.());
 
   const cancel = () => { clearTimeout(timer); timer = undefined; };
+  // The fold back into the trigger: the panel stays until its animation ends (or FOLD_MS passes).
+  let folding: ReturnType<typeof setTimeout> | undefined;
+  const settleFold = () => {
+    clearTimeout(folding);
+    folding = undefined;
+    panel.removeEventListener('animationend', settleFold);
+    if (scope.disposed) return;
+    scope.attr(root, 'data-mk-closing', null);
+    if (!opened) scope.attr(panel, 'hidden', '');
+  };
+  scope.add(() => {
+    clearTimeout(folding);
+    panel.removeEventListener('animationend', settleFold);
+  });
   const set = (value: boolean) => {
     cancel();
     if (scope.disposed) return;
     const changed = value !== opened;
     opened = value;
     scope.attr(trigger, 'aria-expanded', String(value));
-    scope.attr(panel, 'hidden', value ? null : '');
+    if (value) {
+      if (folding !== undefined) settleFold();
+      scope.attr(panel, 'hidden', null);
+    } else if (changed && !reduced() && root.dataset.mkInput !== 'keyboard' && !panel.hidden) {
+      scope.attr(root, 'data-mk-closing', '');
+      panel.addEventListener('animationend', settleFold);
+      folding = setTimeout(settleFold, FOLD_MS);
+    } else if (folding === undefined) scope.attr(panel, 'hidden', '');
     scope.attr(root, 'data-mk-open', value ? '' : null);
     if (value && changed) {
       scope.attr(root, 'data-mk-input', pointerInput ? 'pointer' : 'keyboard');

package/src/components/hover-card/hover-card.css

@@ -1,6 +1,7 @@
 .mk-hover-card, mk-hover-card { position: relative; display: inline-flex; }
 .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] {
-  transform-origin: 50% 100%;
+  /* It grows from, and folds back into, the trigger's centre (the engine measures it). */
+  transform-origin: var(--mk-hover-origin-x, 50%) 100%;
   position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: var(--mk-hover-shift, 0);
   width: min(19rem, calc(100vw - 1.5rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
   color: var(--mk-on-glass-inverse); background: var(--mk-glass-inverse); border: 0; border-radius: var(--mk-radius-lg, 24px);
@@ -10,10 +11,15 @@
 }
 /* Bridge over the gap so the pointer can travel into the panel. */
 .mk-hover-card [data-mk-hover-panel]::after, mk-hover-card [data-mk-hover-panel]::after { content: ''; position: absolute; inset: -1rem 0; z-index: -1; }
-:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: 50% 0; animation-name: mk-hover-card-down; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: var(--mk-hover-origin-x, 50%) 0; animation-name: mk-hover-card-down; }
+/* Leaving: it shrinks back into the trigger out of a blur, then the engine hides it. */
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing] [data-mk-hover-panel] { pointer-events: none; animation: mk-hover-card-out .22s cubic-bezier(.4,0,1,1) both; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing][data-mk-side=bottom] [data-mk-hover-panel] { animation-name: mk-hover-card-out-up; }
 /* Opened from the keyboard: no entrance. */
 :is(.mk-hover-card, mk-hover-card)[data-mk-input=keyboard] [data-mk-hover-panel] { animation: none; }
 .mk-hover-card [hidden], mk-hover-card [hidden] { display: none !important; }
 @keyframes mk-hover-card-in { from { opacity: 0; filter: blur(32px); transform: translateY(8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes mk-hover-card-out { to { opacity: 0; filter: blur(12px); transform: translateY(10px) scale(.3); } }
+@keyframes mk-hover-card-out-up { to { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.3); } }
 @keyframes mk-hover-card-down { from { opacity: 0; filter: blur(32px); transform: translateY(-8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] { animation: none; } }

package/src/components/image-preview/element.ts

@@ -8,7 +8,7 @@ import { createImagePreview, type ImagePreviewInstance } from './engine';
  * Emits mk:open, mk:change ({index, previous}) and mk:close.
  */
 export class MkImagePreviewElement extends MkElement<ImagePreviewInstance> {
-  static options: Record<string, OptionType> = { loop: 'boolean', labels: 'json' };
+  static options: Record<string, OptionType> = { loop: 'boolean', strip: 'boolean', labels: 'json' };
 
   protected create(options: Record<string, unknown>) {
     return createImagePreview(this, options);