@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/auto/auto-init.ts

@@ -66,6 +66,9 @@ import { createSplitView } from '../components/split-view/engine';
 import { createDataTable } from '../components/data-table/engine';
 import { createEditableTable } from '../components/editable-table/engine';
 import { createRichTextEditor } from '../components/rich-text-editor/engine';
+import { createSelect } from '../components/select/engine';
+import { createAddToCart } from '../components/add-to-cart/engine';
+import { createScrollIsland } from '../components/scroll-island/engine';
 import { ScrollTrigger } from '../core/gsap';
 import { warnOnce, type Instance } from '../core/types';
 import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
@@ -171,6 +174,9 @@ const factories = {
   'data-table': createDataTable,
   'editable-table': createEditableTable,
   'rich-text-editor': createRichTextEditor,
+  'select': createSelect,
+  'add-to-cart': createAddToCart,
+  'scroll-island': createScrollIsland,
   'weight-hover': createWeightHover,
   'sticker': createSticker,
   'scroll-dock': createScrollDock,

package/src/components/add-to-cart/README.md

@@ -0,0 +1,49 @@
+# add-to-cart
+
+El producto se empaca en una caja y vuela hasta un carrito; al llegar, el contador cambia y el carrito responde con un pulso. Cada clic tiene su propio vuelo. Con movimiento reducido, el contador se actualiza al instante.
+
+## React
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { AddToCart } from '@yewdiel21/motion-kit/react';
+
+<div id="my-cart">Carrito <span data-mk-cart-count>0</span></div>
+<article data-mk-cart-item>
+  <img src="/product.webp" alt="Producto" data-mk-cart-image />
+  <AddToCart target="#my-cart" onLand={count => console.log(count)}>
+    <button type="button">Agregar al carrito</button>
+  </AddToCart>
+</article>
+```
+
+**El botón es obligatorio.** Para ver el recorrido necesitas un destino visible y una imagen. Usa un destino único por demo o carrito para no mezclar instancias. El componente anima la interfaz; la aplicación gestiona el carrito y el inventario reales.
+
+## HTML / Astro
+
+```html
+<div id="my-cart">Carrito <span data-mk-cart-count>0</span></div>
+<article data-mk-cart-item>
+  <img src="/product.webp" alt="Producto" data-mk-cart-image>
+  <mk-add-to-cart target="#my-cart"><button type="button">Agregar</button></mk-add-to-cart>
+</article>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-add-to-cart']);
+</script>
+```
+
+En vanilla puedes llamar a `createAddToCart(root, options)`. `destroy()` limpia los vuelos y listeners.
+
+## Opciones y eventos
+
+- `target`: HTMLElement o selector del carrito; por defecto busca `[data-mk-cart-target]` visible.
+- `image`: HTMLElement o selector; por defecto `[data-mk-cart-image]` dentro del producto.
+- `quantity`: unidades por clic, 1 por defecto.
+- `count`: contador inicial; en React también sincroniza cambios posteriores.
+- `label`: anuncio al llegar, por defecto “Añadido al carrito”.
+- `onAdd(count)`: al pulsar; `onLand(count)`: al terminar el vuelo.
+- Eventos DOM: `mk:add` y `mk:land`, con `detail.count`.
+- Instancia: `add()`, `setCount(count)`, `count`, `destroy()`; React expone `instanceRef`.
+
+El estado final se anuncia con `role="status"`. Usa un botón nativo con nombre accesible. Los vuelos son decorativos, no capturan el puntero y se eliminan al desmontar.

package/src/components/add-to-cart/add-to-cart.css

@@ -0,0 +1,71 @@
+/* add-to-cart — the little box that carries the product to the cart: a kraft front with a tape stripe in the accent,
+   two flaps that close over the picture, a soft shadow; it flies above everything and never takes the pointer. */
+.mk-add-to-cart,
+mk-add-to-cart {
+  display: inline-flex;
+}
+
+[data-mk-cart-box] {
+  --mk-cart-box: #c99a62;
+  --mk-cart-box-shade: #b0824d;
+  --mk-cart-tape: var(--mk-accent);
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.28));
+}
+
+[data-mk-cart-thumb] {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+[data-mk-cart-front] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 70%;
+  border-radius: 4px 4px 8px 8px;
+  background: linear-gradient(180deg, var(--mk-cart-box), var(--mk-cart-box-shade));
+  transform-origin: 50% 100%;
+}
+
+[data-mk-cart-tape] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  border-radius: 0 0 2px 2px;
+  background: var(--mk-cart-tape);
+  opacity: 0.9;
+  transform-origin: 50% 0;
+}
+
+[data-mk-cart-flap] {
+  position: absolute;
+  top: 18%;
+  width: 50%;
+  height: 14%;
+  background: var(--mk-cart-box-shade);
+}
+
+[data-mk-cart-flap='left'] {
+  left: 0;
+  border-radius: 4px 0 0 2px;
+  transform-origin: 0 100%;
+}
+
+[data-mk-cart-flap='right'] {
+  right: 0;
+  border-radius: 0 4px 2px 0;
+  transform-origin: 100% 100%;
+}

package/src/components/add-to-cart/element.ts

@@ -0,0 +1,20 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createAddToCart, type AddToCartInstance } from './engine';
+
+/**
+ * <mk-add-to-cart class="mk-add-to-cart" target="#carrito"><button>Agregar</button></mk-add-to-cart>
+ * Packs the product's [data-mk-cart-image] and flies it to the cart. Emits mk:add and mk:land ({count}).
+ */
+export class MkAddToCartElement extends MkElement<AddToCartInstance> {
+  static options: Record<string, OptionType> = { target: 'string', image: 'string', quantity: 'number', count: 'number', label: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createAddToCart(this, options);
+  }
+
+  get count() {
+    return this.instance?.count ?? 0;
+  }
+}
+
+export const defineAddToCart = () => defineElement('mk-add-to-cart', MkAddToCartElement);

package/src/components/add-to-cart/engine.ts

@@ -0,0 +1,206 @@
+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, ringPulse, rollDigits } from '../../motion/micro';
+
+/*
+ * Add to cart: the button packs the product and sends it to the cart. A copy of
+ * the product's picture shrinks and drops into a little box whose flaps close
+ * with a bounce and whose tape draws itself (.6 s); the box flies to the cart on
+ * an arc (x on the signature curve, y up then down, a slight spin, shrinking,
+ * .62 s), dives into it, and the cart bumps, pulses a ring and rolls its count.
+ * Each click sends its own box; the cart shows the latest count when a box
+ * lands. With reduced motion the count changes at once. The flight comes from
+ * the mini POS's flyToCart; the packing is new.
+ */
+
+export interface AddToCartOptions {
+  /** Where the box goes: an element, a selector, or (default) the first visible [data-mk-cart-target]. */
+  target?: HTMLElement | string;
+  /** The picture packed: an element, a selector, or (default) the [data-mk-cart-image] of the [data-mk-cart-item] around the button. */
+  image?: HTMLElement | string;
+  /** Items each click adds (default 1). */
+  quantity?: number;
+  /** The cart's count to start from (default: the number in the target's [data-mk-cart-count], else 0). */
+  count?: number;
+  /** Announced after a box lands (default 'Añadido al carrito'). */
+  label?: string;
+  /** A click: the new count (right away). */
+  onAdd?: (count: number) => void;
+  /** A box landed in the cart. */
+  onLand?: (count: number) => void;
+}
+
+export interface AddToCartInstance extends Instance {
+  /** Send a box, as a click does. */
+  add(): void;
+  setCount(count: number): void;
+  readonly count: number;
+}
+
+const BOX = 56;
+const FLIGHT = 0.62;
+
+/** An element from an option, a selector, or a default lookup. */
+const resolve = (option: HTMLElement | string | undefined, fallback: () => HTMLElement | null) =>
+  option instanceof HTMLElement ? option : typeof option === 'string' ? document.querySelector<HTMLElement>(option) : fallback();
+
+export function createAddToCart(root: HTMLElement | null, options: AddToCartOptions = {}): AddToCartInstance {
+  const button = root ? (root.matches('button') ? root : root.querySelector<HTMLElement>('button')) : null;
+  if (!root || !button) return inert({ add() {}, setCount() {}, count: 0 });
+  registerMotion();
+  const scope = createScope();
+  const quantity = Number.isFinite(options.quantity) && options.quantity! > 0 ? Math.round(options.quantity!) : 1;
+
+  const target = () =>
+    resolve(options.target, () => {
+      const all = [...document.querySelectorAll<HTMLElement>('[data-mk-cart-target]')];
+      return all.find((element) => {
+        const box = element.getBoundingClientRect();
+        return box.width > 0 && box.bottom > 0 && box.top < innerHeight;
+      }) ?? all[0] ?? null;
+    });
+  const image = () => resolve(options.image, () => button.closest('[data-mk-cart-item]')?.querySelector<HTMLElement>('[data-mk-cart-image]') ?? null);
+  const counter = () => target()?.querySelector<HTMLElement>('[data-mk-cart-count]') ?? null;
+  const read = Number.parseInt(counter()?.textContent ?? '', 10);
+  let count = Number.isFinite(options.count) ? Math.max(0, Math.round(options.count!)) : Number.isFinite(read) ? read : 0;
+
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  root.append(status);
+  scope.add(() => status.remove());
+  scope.attr(root, 'data-mk-ready', '');
+
+  const boxes = new Set<HTMLElement>();
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const box of boxes) box.remove();
+    boxes.clear();
+  });
+
+  /** The cart takes the box: it bumps, pulses and rolls its count to the latest number. */
+  const land = (animate: boolean) => {
+    const cart = target();
+    const number = counter();
+    const text = String(count);
+    if (number && number.textContent !== text) {
+      if (animate) keep(rollDigits(number, text, 1, 0.35));
+      else number.textContent = text;
+    }
+    if (cart && animate) {
+      keep(gsap.fromTo(cart, { scale: 1 }, { scale: 1.1, duration: 0.14, ease: 'power2.out', yoyo: true, repeat: 1, clearProps: 'transform' }));
+      keep(ringPulse(cart));
+    }
+    status.textContent = `${options.label ?? 'Añadido al carrito'}: ${count}`;
+    options.onLand?.(count);
+    root.dispatchEvent(new CustomEvent('mk:land', { bubbles: true, detail: { count } }));
+  };
+
+  /** The box: the picture inside, a front, two flaps and a strip of tape. */
+  const makeBox = (picture: HTMLElement | null) => {
+    const box = document.createElement('div');
+    box.dataset.mkCartBox = '';
+    box.setAttribute('aria-hidden', 'true');
+    let thumb: HTMLImageElement | null = null;
+    const src = picture instanceof HTMLImageElement ? picture.currentSrc || picture.getAttribute('src') : null;
+    if (src) {
+      thumb = document.createElement('img');
+      thumb.src = src;
+      thumb.alt = '';
+      thumb.dataset.mkCartThumb = '';
+      box.append(thumb);
+    }
+    const front = document.createElement('span');
+    front.dataset.mkCartFront = '';
+    const tape = document.createElement('span');
+    tape.dataset.mkCartTape = '';
+    front.append(tape);
+    const left = document.createElement('span');
+    left.dataset.mkCartFlap = 'left';
+    const right = document.createElement('span');
+    right.dataset.mkCartFlap = 'right';
+    box.append(front, left, right);
+    return { box, thumb, front, tape, left, right };
+  };
+
+  const add = () => {
+    if (scope.disposed) return;
+    count += quantity;
+    options.onAdd?.(count);
+    root.dispatchEvent(new CustomEvent('mk:add', { bubbles: true, detail: { count } }));
+    if (reduced()) return land(false);
+    keep(press(button));
+    const picture = image();
+    const from = (picture ?? button).getBoundingClientRect();
+    const cart = target();
+    const to = cart?.getBoundingClientRect() ?? null;
+    const { box, thumb, front, tape, left, right } = makeBox(picture);
+    const startX = from.left + from.width / 2 - BOX / 2;
+    const startY = from.top + from.height / 2 - BOX / 2;
+    Object.assign(box.style, { left: `${startX}px`, top: `${startY}px`, width: `${BOX}px`, height: `${BOX}px` });
+    document.body.append(box);
+    boxes.add(box);
+    const gone = () => {
+      box.remove();
+      boxes.delete(box);
+    };
+
+    const timeline = gsap.timeline({
+      onComplete: () => {
+        gone();
+        land(true);
+      },
+    });
+    // 1 · Packing: the picture shrinks into the box, the box rises around it, the flaps close, the tape draws.
+    if (thumb) {
+      const scale = Math.max(from.width, from.height) / 40 || 1;
+      timeline.fromTo(thumb, { scale, y: 0, opacity: 1 }, { scale: 1, y: -14, duration: 0.32, ease: EASE.signature }, 0);
+      timeline.to(thumb, { y: 4, duration: 0.16, ease: 'power2.in' }, 0.3);
+    }
+    timeline.fromTo(front, { scaleY: 0 }, { scaleY: 1, duration: 0.26, ease: EASE.pop }, 0.08);
+    timeline.fromTo([left, right], { opacity: 0 }, { opacity: 1, duration: 0.12 }, 0.12);
+    timeline.fromTo(left, { rotation: -70 }, { rotation: 0, duration: 0.3, ease: EASE.click }, 0.38);
+    timeline.fromTo(right, { rotation: 70 }, { rotation: 0, duration: 0.3, ease: EASE.click }, 0.43);
+    timeline.fromTo(tape, { scaleY: 0 }, { scaleY: 1, duration: 0.16, ease: EASE.wipe }, 0.62);
+    // 2 · The flight: an arc to the cart (x on the signature curve, y up then down), a slight spin, smaller.
+    const start = 0.74;
+    if (to) {
+      const dx = to.left + to.width / 2 - (startX + BOX / 2);
+      const dy = to.top + to.height / 2 - (startY + BOX / 2);
+      const lift = Math.min(dy, 0) - 70;
+      timeline.to(box, { x: dx, duration: FLIGHT, ease: EASE.signature }, start);
+      timeline.to(box, { y: lift, duration: FLIGHT * 0.42, ease: 'power2.out' }, start);
+      timeline.to(box, { y: dy, duration: FLIGHT * 0.58, ease: 'power2.in' }, start + FLIGHT * 0.42);
+      timeline.fromTo(box, { rotation: 0 }, { rotation: 10, scale: 0.55, duration: FLIGHT, ease: 'power1.inOut' }, start);
+      // 3 · Into the cart.
+      timeline.to(box, { scale: 0.15, opacity: 0, duration: 0.14, ease: 'power2.in' }, start + FLIGHT - 0.04);
+    } else timeline.to(box, { y: -24, opacity: 0, scale: 0.8, filter: 'blur(6px)', duration: 0.3, ease: 'power2.in' }, start);
+    keep(timeline);
+  };
+
+  scope.on(button, 'click', add);
+
+  return {
+    add,
+    setCount(next) {
+      if (!Number.isFinite(next)) return;
+      count = Math.max(0, Math.round(next));
+      const number = counter();
+      if (number) number.textContent = String(count);
+    },
+    get count() {
+      return count;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/add-to-cart/react.tsx

@@ -0,0 +1,33 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createAddToCart, type AddToCartInstance, type AddToCartOptions } from './engine';
+
+export interface AddToCartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onAdd'>, AddToCartOptions {
+  instanceRef?: MutableRefObject<AddToCartInstance | null>;
+}
+
+/** <AddToCart target="#carrito" onAdd={setCount}><button className="mk-button">Agregar</button></AddToCart>. */
+export function AddToCart({ target, image, quantity, count, label, onAdd, onLand, instanceRef, className, children, ...props }: AddToCartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const add = useLatest(onAdd);
+  const landed = useLatest(onLand);
+  const instance = useRef<AddToCartInstance | null>(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createAddToCart(ref.current, { target, image, quantity, count, label, onAdd: (n) => add.current?.(n), onLand: (n) => landed.current?.(n) });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typeof target === 'string' ? target : null, typeof image === 'string' ? image : null, quantity, label]);
+  useIsomorphicLayoutEffect(() => { if (count !== undefined) instance.current?.setCount(count); }, [count]);
+  return (
+    <div {...props} ref={ref} className={['mk-add-to-cart', className].filter(Boolean).join(' ')}>
+      {children}
+    </div>
+  );
+}

package/src/components/bidirectional-slider/README.md

@@ -0,0 +1,46 @@
+# bidirectional-slider
+
+Control de volumen o balance con relleno desde un origen, burbuja animada y teclado nativo.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { BidirectionalSlider } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add bidirectional-slider --react --elements
+```
+
+## React
+
+```tsx
+<BidirectionalSlider label="Volumen" min={0} max={100} origin={0} value={volume} icons="volume" onInput={setVolume} formatValue={n => `${n}%`} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-bidirectional-slider label="Balance" min="-100" max="100" value="0"></mk-bidirectional-slider>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-bidirectional-slider']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createBidirectionalSlider } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+min: -100. max: 100. origin: 0. step: 1. value: origen. icons: signs, volume o false (atributo icons="none"). disabled, name, label. onInput(value): arrastre. onChange(value): confirmación. Instancia: setValue(value, notify?), reset(notify?), value.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: Usa los colores semánticos --mk-text, --mk-accent y --mk-surface-3..
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

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);