@yewdiel21/motion-kit 0.17.0 → 0.18.0

package/src/components/sticky-header/engine.ts

@@ -0,0 +1,95 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { createScope } from '../../core/scope';
+import { reduced } from '../../core/reduced';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { press } from '../../motion/micro';
+
+export interface StickyHeaderOptions {
+  /** Own scrolling container; window by default. */
+  scroller?: HTMLElement | string | null;
+  expandedHeight?: number;
+  compactHeight?: number;
+  /** Start compacting after this scroll position, in pixels. */
+  threshold?: number;
+  /** Pixels of scroll over which geometry changes. */
+  range?: number;
+  top?: number;
+  disabled?: boolean;
+  onChange?: (compact: boolean) => void;
+}
+export interface StickyHeaderInstance extends Instance {
+  update(): void;
+  setOptions(options: Partial<StickyHeaderOptions>): void;
+  readonly compact: boolean;
+  readonly progress: number;
+}
+
+/** The authored surface changes geometry inside a stable, expanded-height sticky slot. */
+export function createStickyHeader(root: HTMLElement | null, options: StickyHeaderOptions = {}): StickyHeaderInstance {
+  const surface = root?.querySelector<HTMLElement>('[data-mk-sticky-surface]');
+  if (!root || !surface) { if (root) warnOnce('sticky-header: needs an authored [data-mk-sticky-surface]'); return inert({ update() {}, setOptions() {}, compact: false, progress: 0 }); }
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let scroller: HTMLElement | null = null;
+  let unbind = () => {};
+  let frame = 0;
+  let progress = -1;
+  let compact = false;
+  const title = surface.querySelector<HTMLElement>('[data-mk-sticky-title]');
+  const subtitle = surface.querySelector<HTMLElement>('[data-mk-sticky-subtitle]');
+  const animations = new Set<gsap.core.Animation>();
+  const track = (animation: gsap.core.Animation | null) => { if (animation) animations.add(animation); };
+  for (const node of [root, surface, title, subtitle]) if (node) scope.attr(node, 'style', node.getAttribute('style'));
+  scope.attr(root, 'class', `${root.className} mk-sticky-header`.trim());
+  scope.attr(root, 'data-mk-ready', '');
+  const dimensions = () => {
+    const large = Number.isFinite(opts.expandedHeight) ? Math.max(48, opts.expandedHeight!) : 104;
+    const small = Number.isFinite(opts.compactHeight) ? Math.max(40, Math.min(large, opts.compactHeight!)) : Math.min(64, large);
+    root.style.setProperty('--mk-sticky-expanded-height', `${large}px`);
+    root.style.setProperty('--mk-sticky-top', `${Math.max(0, opts.top ?? 0)}px`);
+    return { large, small };
+  };
+  const update = () => {
+    frame = 0;
+    if (scope.disposed) return;
+    const { large, small } = dimensions();
+    const position = scroller ? scroller.scrollTop : window.scrollY;
+    const next = opts.disabled ? 0 : Math.max(0, Math.min(1, (position - Math.max(0, opts.threshold ?? 8)) / Math.max(1, opts.range ?? 96)));
+    if (next === progress) return;
+    const initial = progress < 0;
+    progress = next;
+    const isCompact = next >= .5;
+    scope.attr(root, 'data-mk-compact', String(isCompact));
+    scope.attr(root, 'data-mk-disabled', opts.disabled ? '' : null);
+    const duration = reduced() || initial ? 0 : .22;
+    track(gsap.to(surface, { height: large + (small - large) * next, borderRadius: 24 - 8 * next, paddingLeft: 24 - 8 * next, paddingRight: 24 - 8 * next, duration, ease: EASE.swatch, overwrite: 'auto' }));
+    if (title) track(gsap.to(title, { scale: 1 - .16 * next, y: -2 * next, transformOrigin: 'left center', duration, ease: EASE.swatch, overwrite: 'auto' }));
+    if (subtitle) track(gsap.to(subtitle, { opacity: 1 - next, y: -8 * next, height: `${(1 - next) * 1.5}em`, filter: `blur(${next * 4}px)`, duration, ease: EASE.signature, overwrite: 'auto' }));
+    if (isCompact !== compact) {
+      compact = isCompact;
+      opts.onChange?.(compact);
+      root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { compact, progress } }));
+    }
+  };
+  const queue = () => { if (!frame) frame = requestAnimationFrame(update); };
+  const bind = () => {
+    unbind();
+    scroller = typeof opts.scroller === 'string' ? (() => { try { return root.closest<HTMLElement>(opts.scroller) ?? document.querySelector<HTMLElement>(opts.scroller); } catch { return null; } })() : opts.scroller ?? null;
+    const target = scroller ?? window;
+    target.addEventListener('scroll', queue, { passive: true });
+    unbind = () => target.removeEventListener('scroll', queue);
+  };
+  scope.on(window, 'resize', queue, { passive: true });
+  scope.on(surface, 'click', (event) => {
+    const control = (event.target as Element).closest<HTMLElement>('button, a');
+    if (control && !control.matches(':disabled, [aria-disabled="true"]')) { scope.attr(control, 'style', control.getAttribute('style')); track(press(control)); }
+  });
+  if (typeof ResizeObserver === 'function') { const observer = scope.observe(new ResizeObserver(queue)); observer.observe(root); }
+  bind(); update();
+  return {
+    update, get compact() { return compact; }, get progress() { return Math.max(0, progress); },
+    setOptions(next) { if (scope.disposed) return; opts = { ...opts, ...next }; if ('scroller' in next) bind(); progress = -1; update(); },
+    destroy() { if (scope.disposed) return; cancelAnimationFrame(frame); unbind(); animations.forEach((animation) => animation.kill()); gsap.killTweensOf([surface, title, subtitle].filter((node): node is HTMLElement => !!node)); scope.dispose(); },
+  };
+}

package/src/components/sticky-header/react.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createStickyHeader, type StickyHeaderOptions, type StickyHeaderInstance } from './engine';
+
+export interface StickyHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, StickyHeaderOptions {
+  instanceRef?: MutableRefObject<StickyHeaderInstance | null>;
+
+}
+export function StickyHeader({ scroller, expandedHeight, compactHeight, threshold, range, top, disabled, onChange, instanceRef, className, children, ...props }: StickyHeaderProps) {
+  const root = useRef<HTMLDivElement>(null);
+  const instance = useRef<StickyHeaderInstance | null>(null);
+  const onChangeRef = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createStickyHeader(root.current, { scroller, expandedHeight, compactHeight, threshold, range, top, disabled, onChange: (...args) => onChangeRef.current?.(...args) });
+    instance.current = created;
+    return () => { created.destroy(); instance.current = null; };
+    // Options update the existing engine so timers, selection and scroll state survive.
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setOptions({ scroller, expandedHeight, compactHeight, threshold, range, top, disabled });
+  }, [scroller, expandedHeight, compactHeight, threshold, range, top, disabled]);
+  useIsomorphicLayoutEffect(() => { if (instanceRef) instanceRef.current = instance.current; return () => { if (instanceRef) instanceRef.current = null; }; }, [instanceRef]);
+  return <div {...props} ref={root} className={['mk-sticky-header', className].filter(Boolean).join(' ')}><div data-mk-sticky-surface="" className="mk-sticky-header__surface">{children}</div></div>;
+}

package/src/components/sticky-header/sticky-header.css

@@ -0,0 +1,9 @@
+.mk-sticky-header, mk-sticky-header { display: block; position: sticky; top: var(--mk-sticky-top, 0px); z-index: 5; height: var(--mk-sticky-expanded-height, 104px); min-height: var(--mk-sticky-expanded-height, 104px); pointer-events: none; color: var(--mk-text); font-family: var(--mk-font); }
+.mk-sticky-header [data-mk-sticky-surface], mk-sticky-header [data-mk-sticky-surface] { box-sizing: border-box; position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 104px; padding: 16px 24px; border-radius: 24px; pointer-events: auto; background: var(--mk-surface); transition: background .3s, box-shadow .3s; }
+:is(.mk-sticky-header,mk-sticky-header)[data-mk-compact=true] [data-mk-sticky-surface] { background: var(--mk-surface-2); box-shadow: 0 10px 24px -20px var(--mk-shadow-color, rgb(0 0 0 / .4)); }
+:is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-title] { display: block; margin: 0; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
+:is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-subtitle] { display: block; margin: 4px 0 0; height: 1.5em; overflow: hidden; color: var(--mk-muted); font-size: 12px; line-height: 1.5; }
+:is(.mk-sticky-header,mk-sticky-header) :is(button,a):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+:is(.mk-sticky-header,mk-sticky-header) button:disabled { opacity: .4; cursor: not-allowed; }
+@media (max-width: 480px) { :is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-surface] { gap: 12px; } }
+@media (prefers-reduced-motion: reduce) { :is(.mk-sticky-header,mk-sticky-header) * { transition: none !important; } }

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

@@ -0,0 +1,42 @@
+# TemperatureSlider
+
+Rango de temperatura con número rodante, pequeñas marcas y un tinte frío/cálido construido con los tokens del tema. La cifra, el relleno y el pulgar responden inmediatamente al arrastrar.
+
+```ts
+import { createTemperatureSlider } from '@yewdiel21/motion-kit';
+import '@yewdiel21/motion-kit/css/temperature-slider';
+
+const control = createTemperatureSlider(document.querySelector('.mk-temperature-slider'), {
+  value: 22, unit: 'C', label: 'Temperatura deseada', name: 'temperature', onInput: console.log,
+});
+control.setValue(24);
+```
+
+## Opciones y contrato
+
+`unit: C | F` (C), `min` (16 / 60), `max` (30 / 86), `step` (1), `value` / `defaultValue` (22 / 72), `label`, `name`, `disabled`, `error`, `formatValue`, `onInput(value)`, `onChange(value)`.
+
+unit determina el sufijo y los límites predeterminados. Cambiar el atributo o la opción `unit` al crear no convierte el número; `setUnit('F' | 'C', range?, notify?)` sí lo convierte en el mismo control: la cifra y los extremos ruedan y el pulgar se desliza sin desmontar nada. En React, cambiar la prop `unit` usa `setUnit`. Los cambios por código, presets y teclado deslizan el pulgar con la curva swatch del kit; al arrastrar sigue al puntero sin retraso. --mk-temperature-cool y --mk-temperature-hot permiten adaptar los dos extremos con colores semánticos del tema.
+
+La instancia expone `value: number`, `unit`, `setValue(value, notify = false)`, `setUnit(unit, range?, notify = false)`, `reset(notify = false)` y `destroy()`. Las escrituras imperativas actualizan el control incluso estando disabled. `setValue` no cambia el valor inicial al que vuelve reset. Las notificaciones usan callbacks y eventos `mk:input / mk:change` con `detail: { value }`.
+
+## React y HTML
+
+```tsx
+import { TemperatureSlider } from '@yewdiel21/motion-kit/react';
+
+<TemperatureSlider value={temperature} onInput={setTemperature} unit="C" name="temperature" />
+```
+
+`value` controla la instancia; `defaultValue` inicia una instancia que conserva sus propios cambios. Las opciones pueden cambiar sin perder la selección no controlada. `instanceRef` recibe la instancia y admite cambiar de objeto ref. Los children y dangerouslySetInnerHTML no se pasan al host porque el motor posee ese DOM.
+
+```html
+<mk-temperature-slider class="mk-temperature-slider" value="22" unit="C" label="Temperatura deseada" name="temperature"></mk-temperature-slider>
+```
+
+Registra con `defineTemperatureSlider()` desde `@yewdiel21/motion-kit/elements` o utiliza el auto registro. Los atributos de opciones se pueden cambiar en vivo; el valor imperativo se conserva al cambiar otra opción. `disabled="false"` se lee como false. El elemento expone `value`, `setValue`, `reset`.
+
+## Accesibilidad y lifecycle
+
+Se conserva el input nativo, su etiqueta, teclado, tacto, validación y participación en formularios. El reset de formulario es cancelable; el control espera al reset nativo y verifica defaultPrevented. Movimiento reducido conserva toda la funcionalidad. destroy es idempotente y libera animaciones, eventos y timers, elimina solo las partes creadas y restaura los atributos del host. Los temas utilizan DM Sans y tokens --mk-*; el CSS de este componente es independiente de los otros estilos.
+

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

@@ -0,0 +1,53 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createTemperatureSlider, type TemperatureSliderInstance, type TemperatureUnit } from './engine';
+
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+export class MkTemperatureSliderElement extends MkElement<TemperatureSliderInstance> {
+  static options: Record<string, OptionType> = {"min":"number","max":"number","step":"number","value":"number","label":"string","name":"string","disabled":"boolean","error":"string","unit":"string"};
+  private baseline: number | undefined;
+  private saved: number | undefined;
+  private syncing = false;
+  protected create(options: Record<string, unknown>) {
+    const created = createTemperatureSlider(this, { ...options, value: this.saved !== undefined ? this.saved : options.value as number | undefined, defaultValue: this.baseline });
+    if (this.baseline === undefined) this.baseline = created.value;
+    this.saved = undefined;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || this.syncing) return;
+    if (name === 'value' && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? 22 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 22;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === 'value') {
+      const parsed = next === null ? this.baseline ?? 22 : Number(next);
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value(): number { return this.instance?.value ?? this.saved ?? 22; }
+  set value(next: number) { this.setValue(next); }
+  setValue(value: number, notify = false) { if (this.instance) this.instance.setValue(value, notify); else this.saved = value; }
+  reset(notify = false) { this.instance?.reset(notify); }
+  get unit(): TemperatureUnit { return this.instance?.unit ?? (this.getAttribute('unit') === 'F' ? 'F' : 'C'); }
+  /** Converts in place and glides; the unit, min and max attributes follow without remounting. */
+  setUnit(unit: TemperatureUnit, notify = false) {
+    if (!this.instance) { this.setAttribute('unit', unit); return; }
+    this.instance.setUnit(unit, {}, notify);
+    this.syncing = true;
+    try {
+      this.setAttribute('unit', this.instance.unit);
+      for (const name of ['min', 'max']) this.removeAttribute(name);
+    } finally { this.syncing = false; }
+  }
+  
+}
+export const defineTemperatureSlider = () => defineElement('mk-temperature-slider', MkTemperatureSliderElement);
+

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

@@ -0,0 +1,44 @@
+import { createNumericRange, type NumericOptions, type NumericInstance } from '../equalizer-slider/shared';
+
+export type TemperatureUnit = 'C' | 'F';
+export interface TemperatureSliderOptions extends NumericOptions { unit?: TemperatureUnit }
+export interface TemperatureSliderInstance extends NumericInstance {
+  readonly unit: TemperatureUnit;
+  /** Converts the value into `unit` and glides to it. `min`/`max` default to the unit's comfort range. */
+  setUnit(unit: TemperatureUnit, range?: { min?: number; max?: number; step?: number }, notify?: boolean): void;
+}
+const RANGE = { C: { min: 16, max: 30, value: 22 }, F: { min: 60, max: 86, value: 72 } } as const;
+const convert = (value: number, from: TemperatureUnit, to: TemperatureUnit) => from === to ? value : to === 'F' ? value * 9 / 5 + 32 : (value - 32) * 5 / 9;
+
+export function createTemperatureSlider(root: HTMLElement | null, options: TemperatureSliderOptions = {}): TemperatureSliderInstance {
+  let unit: TemperatureUnit = options.unit === 'F' ? 'F' : 'C';
+  const formatFor = (next: TemperatureUnit) => (n: number) => `${n}°${next}`;
+  const range = createNumericRange(root, options, {
+    prefix: 'temperature', label: 'Temperatura', ...RANGE[unit],
+    format: formatFor(unit),
+    decorate({ track, thumb }) {
+      const rail = document.createElement('span'); rail.dataset.mkTemperatureRail = ''; rail.setAttribute('aria-hidden', 'true'); track.prepend(rail);
+      const fill = document.createElement('span'); fill.dataset.mkTemperatureFill = ''; rail.append(fill);
+      const ticks = document.createElement('span'); ticks.dataset.mkTemperatureTicks = ''; ticks.setAttribute('aria-hidden', 'true');
+      for (let i = 0; i <= 14; i++) ticks.append(document.createElement('i'));
+      track.prepend(ticks); thumb.textContent = '··';
+      return (ratio) => {
+        root?.style.setProperty('--mk-temperature-warm', `${Math.round(ratio * 100)}%`);
+        fill.style.width = `${ratio * 100}%`;
+      };
+    },
+  });
+  return {
+    get value() { return range.value; },
+    get unit() { return unit; },
+    setValue: range.setValue,
+    reset: range.reset,
+    setUnit(next, limits = {}, notify = false) {
+      const target: TemperatureUnit = next === 'F' ? 'F' : 'C';
+      const value = Math.round(convert(range.value, unit, target));
+      unit = target;
+      range.configure({ min: limits.min ?? RANGE[target].min, max: limits.max ?? RANGE[target].max, step: limits.step, format: options.formatValue ?? formatFor(target), value }, notify);
+    },
+    destroy: range.destroy,
+  };
+}

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

@@ -0,0 +1,66 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createTemperatureSlider, type TemperatureSliderOptions, type TemperatureSliderInstance } from './engine';
+
+export interface TemperatureSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput' | 'defaultValue' | 'children' | 'dangerouslySetInnerHTML'>, Omit<TemperatureSliderOptions, 'value' | 'defaultValue'> {
+  value?: number;
+  defaultValue?: number;
+  instanceRef?: MutableRefObject<TemperatureSliderInstance | null>;
+  /** The engine owns this component's DOM. */
+  children?: never;
+  dangerouslySetInnerHTML?: never;
+}
+export function TemperatureSlider({ value, defaultValue, min, max, step, label, name, disabled, error, formatValue, unit, onChange, onInput, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }: TemperatureSliderProps) {
+  const root = useRef<HTMLDivElement>(null);
+  const engine = useRef<TemperatureSliderInstance | null>(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const input = useLatest(onInput);
+  const baseline = useRef(value !== undefined ? value : defaultValue);
+  const current = useRef(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== undefined) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createTemperatureSlider(root.current, {
+      min, max, step, label, name, disabled, error, formatValue, unit, value: latestValue.current !== undefined ? latestValue.current : current.current, defaultValue: baseline.current,
+      onChange: (next) => { change.current?.(next); reconcile(); },
+      onInput: (next) => { input.current?.(next); if (input.current || !change.current) reconcile(); },
+    });
+    engine.current = created;
+    const form = root.current?.closest('form');
+    const pending = new Set<ReturnType<typeof setTimeout>>();
+    const reset = (event: Event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== undefined) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener('reset', reset);
+    return () => {
+      form?.removeEventListener('reset', reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value; created.destroy(); engine.current = null;
+    };
+    // Callbacks and controlled value are read through refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [min, max, step, label, name, disabled, error, formatValue]);
+  // A unit change converts and glides in place instead of remounting the slider.
+  useIsomorphicLayoutEffect(() => {
+    const next = unit === 'F' ? 'F' : 'C';
+    if (engine.current && engine.current.unit !== next) engine.current.setUnit(next, { min, max, step });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unit]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== undefined) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => { instanceRef.current = null; };
+  }, [instanceRef, min, max, step, label, name, disabled, error, formatValue]);
+  return <div {...props} ref={root} className={['mk-temperature-slider', className].filter(Boolean).join(' ')} />;
+}
+

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

@@ -0,0 +1,29 @@
+:is(.mk-temperature-slider, mk-temperature-slider) { display: block; width: 100%; min-width: 0; color: var(--mk-text); font: 500 .875rem/1.4 var(--mk-font); }
+[data-mk-temperature-body] { display: grid; gap: .875rem; }
+[data-mk-temperature-header] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
+[data-mk-temperature-output] { font-variant-numeric: tabular-nums; white-space: nowrap; }
+[data-mk-temperature-track] { position: relative; height: 76px; min-width: 0; border-radius: 24px; background: var(--mk-surface-2); }
+[data-mk-temperature-input] { position: absolute; z-index: 3; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; opacity: 0; }
+[data-mk-temperature-input]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 32px; height: 76px; background: transparent; }
+[data-mk-temperature-input]::-moz-range-thumb { width: 32px; height: 76px; border: 0; background: transparent; }
+[data-mk-temperature-thumb] { position: absolute; z-index: 2; top: 50%; left: calc(16px + (100% - 32px) * var(--mk-temperature-ratio, .5)); translate: -50% -50%; pointer-events: none; }
+[data-mk-temperature-track]:has(:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 4px; }
+[data-mk-temperature-ends] { display: flex; justify-content: space-between; margin-top: -.375rem; color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
+[data-mk-temperature-message] { color: var(--mk-error); font-size: .8125rem; font-weight: 400; }
+[data-mk-temperature-message]:empty { display: none; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-disabled] { opacity: .4; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-disabled] [data-mk-temperature-input] { cursor: not-allowed; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-error] [data-mk-temperature-track] { outline: 1px solid var(--mk-error); }
+:is(.mk-temperature-slider, mk-temperature-slider) { --mk-temperature-cool: var(--mk-accent); --mk-temperature-hot: var(--md-sys-color-tertiary, var(--mk-text)); --mk-temperature-tint: color-mix(in srgb, var(--mk-temperature-cool), var(--mk-temperature-hot) var(--mk-temperature-warm, 50%)); }
+[data-mk-temperature-output] { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.2; }
+[data-mk-temperature-track] { height: 64px; background: color-mix(in srgb, var(--mk-temperature-tint) 5%, var(--mk-surface-2)); }
+[data-mk-temperature-rail] { position: absolute; inset: 28px 16px; border-radius: 64px; background: var(--mk-outline-soft); overflow: hidden; }
+[data-mk-temperature-fill] { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--mk-temperature-tint) 42%, var(--mk-text)); }
+[data-mk-temperature-ticks] { position: absolute; inset: 0 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
+[data-mk-temperature-ticks] > i { width: 1px; height: 18px; background: var(--mk-outline-soft); }
+[data-mk-temperature-thumb] { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 12px; background: var(--mk-text); color: var(--mk-bg); font: 700 18px/1 var(--mk-font); box-shadow: 0 0 0 4px var(--mk-surface-2); transition: width .35s var(--mk-ease-swatch), border-radius .35s var(--mk-ease-swatch); }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-held] [data-mk-temperature-thumb] { width: 38px; border-radius: 16px; }
+@media (hover: hover) { [data-mk-temperature-track]:has(:not(:disabled):hover) [data-mk-temperature-thumb] { border-radius: 16px; width: 34px; } }
+@media (prefers-reduced-motion: reduce) { [data-mk-temperature-thumb] { transition: none; } }
+@media (forced-colors: active) { [data-mk-temperature-rail] { background: GrayText; } [data-mk-temperature-fill], [data-mk-temperature-thumb] { background: Highlight; } }
+

package/src/components/voice-message-bubble/engine.ts

@@ -1,6 +1,8 @@
 import { createScope } from '../../core/scope';
 import type { WaveformPlayerInstance, WaveformPlayerOptions } from '../waveform-player/engine';
 import { createWaveformPlayer } from '../waveform-player/engine';
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
 
 export type VoiceMessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
 export interface VoiceMessageBubbleOptions extends WaveformPlayerOptions {
@@ -20,6 +22,7 @@ const statusLabels: Record<VoiceMessageStatus, string> = { sending: 'Enviando',
 /** A message presentation around the real waveform audio player. Never records audio. */
 export function createVoiceMessageBubble(root: HTMLElement | null, options: VoiceMessageBubbleOptions = {}): VoiceMessageBubbleInstance {
   if (!root) return createWaveformPlayer(null, options);
+  registerMotion();
   const scope = createScope();
   let opts = { ...options };
   const content = document.createElement('div');
@@ -63,6 +66,14 @@ export function createVoiceMessageBubble(root: HTMLElement | null, options: Voic
     player.update({ ...audio, label: opts.label ?? (opts.author ? `mensaje de voz de ${opts.author}` : 'mensaje de voz') });
   };
   update(options);
+  // The message grows from its conversational edge, matching the shared chat
+  // vocabulary. Its real controls remain available throughout the entrance.
+  let entrance: gsap.core.Tween | null = null;
+  if (!reduced()) {
+    content.style.transformOrigin = opts.direction === 'outgoing' ? 'right bottom' : 'left bottom';
+    entrance = gsap.fromTo(content, { scale: .88, opacity: 0, filter: 'blur(12px)', y: 10 }, { scale: 1, opacity: 1, filter: 'blur(0px)', y: 0, duration: .65, ease: EASE.signature, clearProps: 'transform,opacity,filter' });
+  }
+  scope.add(() => entrance?.kill());
   return { play: () => player.play(), pause: () => player.pause(), seek: n => player.seek(n), update,
     get state() { return player.state; }, get audio() { return player.audio; }, destroy: () => scope.dispose() };
 }

package/src/components/voice-message-bubble/voice-message-bubble.css

@@ -1,12 +1,14 @@
-/* Requires waveform-player.css; the bubble composes its player without duplicating it. */
-.mk-voice-message-bubble, mk-voice-message-bubble { display: block; width: min(100%, 25rem); color: var(--mk-text); font-family: var(--mk-font); }
-[data-mk-voice-message-content] { display: grid; gap: .75rem; padding: 1rem 1.125rem .75rem; background: var(--mk-surface-2); border: 1px solid var(--mk-outline-soft); border-radius: 1.5rem 1.5rem 1.5rem .375rem; }
-:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] { margin-inline-start: auto; }
-:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] [data-mk-voice-message-content] { background: color-mix(in srgb, var(--mk-accent) 10%, var(--mk-surface-1)); border-radius: 1.5rem 1.5rem .375rem 1.5rem; }
-[data-mk-voice-message-header], [data-mk-voice-message-footer] { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .6875rem; color: var(--mk-muted); }
-[data-mk-voice-message-author] { font-weight: 600; color: var(--mk-text); }
-[data-mk-voice-message-caption] { margin-inline-start: auto; }
-[data-mk-voice-message-footer] { justify-content: flex-end; }
-[data-mk-voice-message-status] { color: var(--mk-accent); }
-[data-mk-voice-message-content] .mk-waveform-player { --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent); }
-@media (forced-colors: active) { [data-mk-voice-message-content] { border-color: CanvasText; } }
+/* Requires waveform-player.css; the bubble composes its player without duplicating it. */
+.mk-voice-message-bubble, mk-voice-message-bubble { display: block; width: min(100%, 25rem); color: var(--mk-text); font-family: var(--mk-font); }
+[data-mk-voice-message-content] { display: grid; gap: .5rem; padding: 1rem 1.25rem .75rem; background: var(--mk-surface-2); border: 0; border-radius: 32px 32px 32px 12px; }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] { margin-inline-start: auto; }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] [data-mk-voice-message-content] { background: var(--mk-surface-3); border-radius: 32px 32px 12px 32px; }
+[data-mk-voice-message-header], [data-mk-voice-message-footer] { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .6875rem; color: var(--mk-muted); }
+[data-mk-voice-message-author] { font-weight: 600; color: var(--mk-text); }
+[data-mk-voice-message-caption] { margin-inline-start: auto; }
+[data-mk-voice-message-footer] { justify-content: flex-end; }
+[data-mk-voice-message-status] { color: var(--mk-accent); }
+/* The track steps one tonal level above its bubble, like the equalizer above the page. */
+[data-mk-voice-message-content] .mk-waveform-player { --mk-wave-surface: var(--mk-surface-3); }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] .mk-waveform-player { --mk-wave-surface: var(--mk-surface-4); }
+@media (forced-colors: active) { [data-mk-voice-message-content] { border-color: CanvasText; } }

package/src/components/waveform-player/README.md

@@ -25,6 +25,6 @@ Opciones: `src`, `peaks`, `label` (nombre accesible), `disabled`, `playbackRates
 
 React admite `instanceRef` y actualiza las opciones/callbacks sin recrear el audio. El custom element expone los mismos métodos, `state`, `audio` y `instance`; los atributos son reactivos (`playback-rates` y `peaks` son JSON). Cambiar solamente picos, etiquetas o callbacks conserva fuente, tiempo y reproducción. Cambiar `src` pausa, cancela solicitudes y reinicia tiempo/duración. `destroy()` detiene el audio, vacía la fuente, retira listeners/animaciones y conserva el DOM ajeno.
 
-El slider nativo conserva teclado (flechas, Home/End), toque y semántica accesible; su nombre incluye `label` y su valor se anuncia como tiempo. Carga, errores y finalización usan un estado discreto; los tiempos no se anuncian continuamente. El pequeño resorte GSAP del botón se omite con movimiento reducido. Tokens locales: `--mk-wave-color`, `--mk-wave-track`; el resto usa los colores, tipografía y superficies del tema.
+El slider nativo conserva teclado (flechas, Home/End), toque y semántica accesible; su nombre incluye `label` y su valor se anuncia como tiempo. Carga, errores y finalización usan un estado discreto; los tiempos no se anuncian continuamente. El pequeño resorte GSAP del botón se omite con movimiento reducido. Comparte el lenguaje del equalizer: pista tonal, barras en píldora remuestreadas al ancho (media de los picos suministrados, sin inventar datos), cabezal recortado que crece al pasar el puntero y al arrastrar, y barras que rebotan al cruzar el cabezal. Tokens locales: `--mk-wave-color` (reproducido y cabezal, texto por defecto), `--mk-wave-track` (pendiente), `--mk-wave-surface` (pista); el resto usa los colores, tipografía y superficies del tema.
 
 Tipos: `WaveformPlayerOptions`, `WaveformPlayerInstance`, `WaveformPlayerState`, `WaveformPlayerStatus`, `WaveformPlayerProps`. El componente reproduce contenido provisto por la aplicación: agrega una transcripción cerca del reproductor cuando el audio contenga información hablada.