@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/bidirectional-slider/bidirectional-slider.css

@@ -0,0 +1,167 @@
+/* bidirectional-slider — a chunky 12 px track whose fill grows from the origin notch towards the thumb:
+   "more" in the accent, "less" in a tint of it. − and + sit at the ends; the bubble shows the signed value while held. */
+.mk-bidirectional-slider,
+mk-bidirectional-slider {
+  --mk-bislider-height: 2.75rem;
+  --mk-bislider-track: var(--mk-surface-2);
+  --mk-bislider-more: var(--mk-accent);
+  --mk-bislider-less: color-mix(in srgb, var(--mk-accent) 45%, var(--mk-surface-2));
+  display: grid;
+  grid-template-columns: auto minmax(6rem, 1fr) auto;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  max-width: 26rem;
+  color: var(--mk-text);
+}
+
+[data-mk-bislider-track] {
+  position: relative;
+  height: var(--mk-bislider-height);
+  border-radius: 12px;
+  background: var(--mk-bislider-track);
+  touch-action: none;
+}
+
+[data-mk-bislider-track]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-bislider-clip] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+[data-mk-bislider-fill] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--mk-bislider-more);
+  transition: background-color 0.2s ease;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-side='less'] [data-mk-bislider-fill] {
+  background: var(--mk-bislider-less);
+}
+
+[data-mk-bislider-notch] {
+  position: absolute;
+  top: 30%;
+  bottom: 30%;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--mk-text) 30%, transparent);
+}
+
+[data-mk-bislider-thumb] {
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  width: 4px;
+  margin-left: -2px;
+  border-radius: 4px;
+  background: var(--mk-text);
+  pointer-events: none;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-thumb] {
+  transform: scale(1.5, 1.2);
+}
+
+[data-mk-bislider-bubble] {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  color: var(--mk-on-glass-inverse);
+  font: 600 0.75rem/1.2 var(--mk-font);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, 4px) scale(0.85);
+  transform-origin: 50% 100%;
+  transition:
+    opacity 0.15s ease,
+    transform 0.3s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):is([data-mk-held], :has(input:focus-visible)) [data-mk-bislider-bubble] {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+[data-mk-bislider-input] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: grab;
+  appearance: none;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-input] {
+  cursor: grabbing;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) {
+  display: grid;
+  place-items: center;
+  width: var(--mk-bislider-height);
+  height: var(--mk-bislider-height);
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (hover: hover) {
+  :is([data-mk-bislider-less], [data-mk-bislider-more]):hover {
+    background: var(--mk-surface-2);
+  }
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):has(input:disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-bislider-thumb],
+  [data-mk-bislider-bubble] {
+    transition: opacity 0.15s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-bislider-fill] {
+    background: Highlight !important;
+  }
+  [data-mk-bislider-track] {
+    border: 1px solid CanvasText;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createBidirectionalSlider, type BidirectionalSliderInstance } from './engine';
+
+/**
+ * <mk-bidirectional-slider class="mk-bidirectional-slider" label="Volumen" icons="volume" value="20"></mk-bidirectional-slider>
+ * A value either side of an origin; the fill grows from it. Emits mk:input and mk:change ({value}).
+ */
+export class MkBidirectionalSliderElement extends MkElement<BidirectionalSliderInstance> {
+  static options: Record<string, OptionType> = {
+    min: 'number',
+    max: 'number',
+    origin: 'number',
+    step: 'number',
+    value: 'number',
+    disabled: 'boolean',
+    name: 'string',
+    label: 'string',
+    icons: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createBidirectionalSlider(this, { ...options, icons: options.icons === 'none' ? false : (options.icons as 'signs' | 'volume' | undefined) });
+  }
+
+  get value() {
+    return this.instance?.value ?? 0;
+  }
+
+  set value(next: number) { this.setValue(next); }
+  setValue(value: number, notify = false) { this.instance?.setValue(value, notify); }
+  reset(notify = false) { this.instance?.reset(notify); }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (name === 'value' && this.instance) {
+      this.instance.setValue(Number(next ?? this.options.origin ?? 0));
+      return;
+    }
+    super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineBidirectionalSlider = () => defineElement('mk-bidirectional-slider', MkBidirectionalSliderElement);

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

@@ -0,0 +1,38 @@
+# breadcrumb
+
+Ruta de navegación jerárquica: una lista ordenada dentro de `<nav aria-label>`, donde el último elemento es la página actual (`aria-current="page"`). Cuando no cabe (o pasa de `maxItems`), los niveles intermedios se pliegan en un botón «…»; al pulsarlo aparecen en su sitio, entrando desde la izquierda con blur (40 ms entre niveles) mientras el resto se desliza para hacerles hueco.
+
+`setItems()` conserva el principio común de la ruta: lo que se queda se desliza a su nuevo sitio (resorte de reflujo), lo nuevo entra desde la derecha y la antigua página actual se vuelve enlace. Los enlaces se subrayan desde la izquierda al señalarlos.
+
+## HTML / Astro
+
+```html
+<mk-breadcrumb class="mk-breadcrumb"
+  items='[{"label":"Inicio","href":"/"},{"label":"Proyectos","href":"/proyectos"},{"label":"Melon"}]'></mk-breadcrumb>
+
+<!-- O con enlaces escritos: -->
+<div class="mk-breadcrumb" data-mk="breadcrumb"><a href="/">Inicio</a><a href="/docs">Docs</a><span>API</span></div>
+```
+
+## React
+
+```tsx
+<Breadcrumb items={path} onNavigate={(item, index, event) => { event.preventDefault(); router.push(item.href!); }} />
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `items` | `items` (JSON) | lo escrito dentro | `{ label, href? }[]`; el último es la página actual. |
+| `label` | `label` | `'Ruta de navegación'` | Nombre accesible del `<nav>`. |
+| `maxItems` | `max-items` | `'auto'` | Número máximo de niveles visibles; `auto` pliega solo cuando no cabe. |
+| `onNavigate(item, index, event)` | — | — | Antes de seguir un enlace; `event.preventDefault()` deja la navegación a tu router. |
+
+## API y eventos
+
+`setItems(items)`, `items`, `destroy()`. Evento `mk:navigate` con `{ item, index }`, cancelable.
+
+## Estilo
+
+Enlaces atenuados con chevrons entre niveles; la página actual en el color del texto y con elipsis como último recurso; el «…» es un botón de 8 px sobre `--mk-surface-3`. Con movimiento reducido todo cambia sin transición.

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,109 @@
+/* breadcrumb — muted links separated by chevrons, the current page in the text colour; links underline from the left
+   on hover (.25 s, wipe curve); the folded middle is a small 8 px "…" button on surface-3. The row never scrolls: it
+   folds, and the current page ellipsizes as a last resort. */
+.mk-breadcrumb,
+mk-breadcrumb {
+  display: block;
+  min-width: 0;
+}
+
+[data-mk-breadcrumb-list] {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  list-style: none;
+}
+
+[data-mk-breadcrumb-nav][data-mk-expanded] [data-mk-breadcrumb-list] {
+  flex-wrap: wrap;
+  overflow: visible;
+}
+
+[data-mk-crumb] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+[data-mk-crumb]:last-child {
+  flex: 0 1 auto;
+}
+
+/* While the engine measures, the current page keeps its full width. */
+[data-mk-breadcrumb-nav][data-mk-measuring] [data-mk-crumb]:last-child {
+  flex: none;
+}
+
+[data-mk-crumb] + [data-mk-crumb]::before {
+  content: '';
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  background: currentColor;
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
+}
+
+[data-mk-crumb-link] {
+  padding: 0.15rem 0;
+  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
+  color: inherit;
+  text-decoration: none;
+  transition: background-size 0.25s cubic-bezier(0.38, 0.49, 0, 1), color 0.2s ease;
+}
+
+[data-mk-crumb-link]:hover {
+  background-size: 100% 1px;
+  color: var(--mk-text);
+}
+
+[data-mk-crumb-link]:focus-visible,
+[data-mk-crumb-more]:focus-visible {
+  border-radius: 6px;
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-crumb-current] {
+  overflow: hidden;
+  color: var(--mk-text);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-crumb-more] {
+  height: 1.5rem;
+  padding: 0 0.45rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+[data-mk-crumb-more]:hover {
+  background: var(--mk-surface-4, var(--mk-surface-3));
+  color: var(--mk-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-crumb-link],
+  [data-mk-crumb-more] {
+    transition: none;
+  }
+}