@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/multi-select/engine.ts

@@ -0,0 +1,294 @@
+import { registerMotion } from '../../core/gsap';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { createChips, type ChipItem } from '../../core/chips';
+import { createListbox, filterOptions, type ListboxOption } from '../../core/listbox';
+import { press, shake } from '../../motion/micro';
+
+/*
+ * Multi select: a combobox field holding the chosen options as chips and a
+ * search input. Typing filters the options (letters in order, accents
+ * ignored, the matches marked); the list opens out of the field and its active
+ * option is a pill that glides (core/listbox.ts). Enter or a click toggles an
+ * option (its check draws itself); chips pop in and fold away
+ * (core/chips.ts). Backspace in an empty search arms the last chip (a ring),
+ * then removes it; ← reaches the chips. `max` stops further choices (the
+ * field shakes and the rest of the options turn off). An authored
+ * <select multiple> gives the options and stays in sync, so forms post as
+ * usual; otherwise `name` adds hidden inputs.
+ */
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  group?: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface MultiSelectOptions {
+  /** The options; without them, an authored <select multiple> gives them. */
+  options?: MultiSelectOption[];
+  value?: string[];
+  /** Search placeholder (default 'Buscar…'). */
+  placeholder?: string;
+  /** Accessible name (default: the authored <label>, else 'Selección'). */
+  label?: string;
+  /** Hidden inputs name[] (when there is no authored select). */
+  name?: string;
+  /** At most this many choices. */
+  max?: number;
+  /** Close the list after each choice (default false). */
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  onChange?: (values: string[]) => void;
+}
+
+export interface MultiSelectInstance extends Instance {
+  setValue(values: string[], notify?: boolean): void;
+  setOptions(options: MultiSelectOption[]): void;
+  open(): void;
+  close(): void;
+  readonly value: string[];
+}
+
+const CHEVRON = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
+const CLEAR = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M7 7l10 10M17 7L7 17"/></svg>';
+
+const readSelect = (select: HTMLSelectElement): MultiSelectOption[] =>
+  [...select.options].map((option) => ({
+    value: option.value,
+    label: option.label || option.textContent?.trim() || option.value,
+    group: option.parentElement instanceof HTMLOptGroupElement ? option.parentElement.label : undefined,
+    disabled: option.disabled,
+  }));
+
+export function createMultiSelect(root: HTMLElement | null, settings: MultiSelectOptions = {}): MultiSelectInstance {
+  if (!root) return inert({ setValue() {}, setOptions() {}, open() {}, close() {}, value: [] });
+  registerMotion();
+  const scope = createScope();
+  const select = root.querySelector<HTMLSelectElement>('select[multiple]');
+  let all: MultiSelectOption[] = settings.options ?? (select ? readSelect(select) : []);
+  const max = Number.isFinite(settings.max) && settings.max! > 0 ? Math.floor(settings.max!) : Infinity;
+  const known = (value: string) => all.some((option) => option.value === value);
+  let value: string[] = (settings.value ?? (select ? [...select.selectedOptions].map((option) => option.value) : [])).filter(known).slice(0, max);
+  const labelText = settings.label ?? root.querySelector('label')?.textContent?.trim() ?? select?.getAttribute('aria-label') ?? 'Selección';
+
+  if (select) {
+    // The native select keeps posting the value; it is synced and out of sight.
+    const before = [...select.options].map((option) => option.selected);
+    scope.attr(select, 'hidden', '');
+    scope.attr(select, 'aria-hidden', 'true');
+    scope.attr(select, 'tabindex', '-1');
+    scope.add(() => [...select.options].forEach((option, i) => (option.selected = before[i] ?? false)));
+  }
+
+  const field = document.createElement('div');
+  field.dataset.mkMsField = '';
+  const chips = createChips({
+    disabled: settings.disabled,
+    onRemove: (removed) => toggle(removed, false),
+    onExit: () => input.focus(),
+  });
+  scope.add(() => chips.destroy());
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.dataset.mkMsInput = '';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-label', labelText);
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.placeholder = settings.placeholder ?? 'Buscar…';
+  input.disabled = Boolean(settings.disabled);
+  const clear = document.createElement('button');
+  clear.type = 'button';
+  clear.dataset.mkMsClear = '';
+  clear.setAttribute('aria-label', 'Quitar todo');
+  clear.innerHTML = CLEAR;
+  clear.disabled = Boolean(settings.disabled);
+  const chevron = document.createElement('span');
+  chevron.dataset.mkMsChevron = '';
+  chevron.innerHTML = CHEVRON;
+  field.append(chips.element, input, clear, chevron);
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  const hiddenHost = document.createElement('span');
+  hiddenHost.hidden = true;
+  root.append(field, status, hiddenHost);
+  scope.add(() => {
+    field.remove();
+    status.remove();
+    hiddenHost.remove();
+  });
+  scope.attr(root, 'data-mk-open', null);
+  scope.attr(root, 'data-mk-has-value', null);
+  scope.attr(root, 'data-mk-ready', '');
+
+  const listbox = createListbox({
+    input,
+    anchor: field,
+    host: root,
+    multiselectable: true,
+    label: labelText,
+    isSelected: (option) => value.includes(option),
+    onPick: (option) => toggle(option.value, !value.includes(option.value), true),
+  });
+  scope.add(() => listbox.destroy());
+
+  const labelOf = (option: string) => all.find((entry) => entry.value === option)?.label ?? option;
+  const listed = (): ListboxOption[] => {
+    const full = value.length >= max;
+    return filterOptions(all, input.value).map((option) => ({ ...option, disabled: option.disabled || (full && !value.includes(option.value)) }));
+  };
+
+  const sync = (animate: boolean) => {
+    chips.set(value.map((option): ChipItem => ({ value: option, label: labelOf(option) })), animate);
+    root.toggleAttribute('data-mk-has-value', value.length > 0);
+    input.placeholder = value.length ? '' : (settings.placeholder ?? 'Buscar…');
+    if (select) for (const option of select.options) option.selected = value.includes(option.value);
+    else if (settings.name) {
+      hiddenHost.replaceChildren(
+        ...value.map((option) => {
+          const hidden = document.createElement('input');
+          hidden.type = 'hidden';
+          hidden.name = `${settings.name}[]`;
+          hidden.value = option;
+          return hidden;
+        }),
+      );
+    }
+    if (listbox.isOpen) listbox.show(listed(), input.value);
+  };
+
+  const emit = () => {
+    settings.onChange?.([...value]);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value: [...value] } }));
+  };
+
+  const toggle = (option: string, on: boolean, fromList = false) => {
+    if (settings.disabled || on === value.includes(option)) return;
+    if (on && value.length >= max) {
+      shake(field);
+      status.textContent = `Máximo ${max} ${max === 1 ? 'opción' : 'opciones'}`;
+      return;
+    }
+    value = on ? [...value, option] : value.filter((entry) => entry !== option);
+    chips.arm(null);
+    sync(true);
+    status.textContent = `${labelOf(option)} ${on ? 'añadida' : 'quitada'}. ${value.length} ${value.length === 1 ? 'seleccionada' : 'seleccionadas'}.`;
+    if (fromList && input.value) {
+      input.value = '';
+      listbox.show(listed(), '');
+    }
+    if (fromList && settings.closeOnSelect) listbox.hide();
+    emit();
+  };
+
+  const open = () => {
+    if (settings.disabled || listbox.isOpen) return;
+    root.setAttribute('data-mk-open', '');
+    listbox.show(listed(), input.value);
+  };
+  const close = () => {
+    root.removeAttribute('data-mk-open');
+    listbox.hide();
+  };
+
+  scope.on(field, 'pointerdown', (event) => {
+    const target = event.target as Element | null;
+    if (target?.closest('[data-mk-chip-remove], [data-mk-ms-clear]')) return;
+    if (target !== input) event.preventDefault();
+    input.focus();
+    if (listbox.isOpen && target?.closest('[data-mk-ms-chevron]')) close();
+    else open();
+  });
+  scope.on(input, 'input', () => {
+    chips.arm(null);
+    open();
+    listbox.show(listed(), input.value);
+  });
+  scope.on(input, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    switch (key.key) {
+      case 'ArrowDown':
+        key.preventDefault();
+        if (!listbox.isOpen) open();
+        listbox.move(1);
+        return;
+      case 'ArrowUp':
+        key.preventDefault();
+        if (!listbox.isOpen) open();
+        listbox.move(-1);
+        return;
+      case 'Home':
+      case 'End':
+        if (!listbox.isOpen || input.value) return;
+        key.preventDefault();
+        listbox.move(key.key === 'Home' ? 'first' : 'last');
+        return;
+      case 'Enter':
+        if (listbox.isOpen && listbox.pick()) key.preventDefault();
+        return;
+      case 'Escape':
+        if (listbox.isOpen) {
+          key.preventDefault();
+          close();
+        } else if (input.value) input.value = '';
+        return;
+      case 'Backspace':
+        if (input.value || !value.length) return;
+        key.preventDefault();
+        if (chips.armed) toggle(chips.armed, false);
+        else chips.arm(value[value.length - 1]!);
+        return;
+      case 'ArrowLeft':
+        if (input.selectionStart === 0 && input.selectionEnd === 0 && chips.focusLast()) {
+          key.preventDefault();
+          close();
+        }
+        return;
+      case 'Tab':
+        close();
+        return;
+    }
+  });
+  scope.on(input, 'blur', () => {
+    chips.arm(null);
+    // A click on an option keeps the focus (pointerdown is cancelled there); anything else closes.
+    close();
+  });
+  scope.on(clear, 'click', () => {
+    if (!value.length) return;
+    press(clear);
+    value = [];
+    sync(true);
+    status.textContent = 'Selección vacía';
+    input.focus();
+    emit();
+  });
+
+  sync(false);
+
+  return {
+    setValue(next, notify = false) {
+      if (scope.disposed) return;
+      value = next.filter(known).slice(0, max);
+      sync(true);
+      if (notify) emit();
+    },
+    setOptions(next) {
+      if (scope.disposed) return;
+      all = [...next];
+      value = value.filter(known);
+      sync(false);
+    },
+    open,
+    close,
+    get value() {
+      return [...value];
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/multi-select/multi-select.css

@@ -0,0 +1,266 @@
+/* multi-select — a 12 px field on surface-3 holding 8 px chips and a search input; a chevron that turns when the list
+   is open; a clear button when something is chosen. The chips and the listbox rules below are shared with tag-input
+   (each stylesheet works alone). */
+.mk-multi-select,
+mk-multi-select {
+  display: block;
+  min-width: 0;
+}
+
+[data-mk-ms-field] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.35rem 0.4rem 0.35rem 0.5rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: text;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-ms-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-ms-input] {
+  flex: 1;
+  min-width: 6ch;
+  height: 1.75rem;
+  padding: 0 0.25rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+[data-mk-ms-input]::placeholder {
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear],
+[data-mk-ms-chevron] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear] {
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+[data-mk-ms-clear]:hover {
+  background: color-mix(in srgb, var(--mk-text) 8%, transparent);
+  color: var(--mk-text);
+}
+
+:is(.mk-multi-select, mk-multi-select):not([data-mk-has-value]) [data-mk-ms-clear] {
+  display: none;
+}
+
+[data-mk-ms-chevron] {
+  transition: rotate 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-multi-select, mk-multi-select)[data-mk-open] [data-mk-ms-chevron] {
+  rotate: 180deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-ms-field],
+  [data-mk-ms-chevron] {
+    transition: none;
+  }
+}
+
+/* Chips (core/chips.ts): 8 px, accent-soft, a round remove button; the armed one (next Backspace) gets a ring. */
+[data-mk-chips] {
+  display: contents;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-chip] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.15rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 1.75rem;
+  padding: 0 0.2rem 0 0.6rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  outline: none;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-chip-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chip]:focus-visible,
+[data-mk-chip][data-mk-armed] {
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-chip-remove] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+[data-mk-chip-remove]:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  opacity: 1;
+}
+
+/* Listbox (core/listbox.ts): a 16 px panel in the top layer under the field; the active option sits on a pill. */
+[data-mk-listbox] {
+  position: fixed;
+  inset: auto;
+  z-index: 2147482000;
+  box-sizing: border-box;
+  max-height: min(18rem, 50vh);
+  margin: 0;
+  padding: 0.35rem;
+  overflow: auto;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 16px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  font: 0.9375rem/1.3 var(--mk-font, system-ui, sans-serif);
+  overscroll-behavior: contain;
+}
+
+[data-mk-listbox][hidden] {
+  display: none;
+}
+
+[data-mk-listbox-items] {
+  position: relative;
+  display: grid;
+  gap: 2px;
+}
+
+[data-mk-listbox-pill] {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  left: 0.35rem;
+  border-radius: 10px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-mk-option] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-mk-option][aria-disabled='true'] {
+  color: var(--mk-muted);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+[data-mk-option-label] {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-option-label] mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: var(--mk-accent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+[data-mk-option-hint] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-option-check] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 1.5px solid var(--mk-outline);
+  border-radius: 5px;
+  color: transparent;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+[data-mk-option][aria-selected='true'] [data-mk-option-check] {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-listbox-group] {
+  padding: 0.6rem 0.75rem 0.25rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+[data-mk-listbox-empty] {
+  padding: 0.75rem;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chip],
+  [data-mk-chip-remove],
+  [data-mk-option-check] {
+    transition: none;
+  }
+}

package/src/components/multi-select/react.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createMultiSelect, type MultiSelectInstance, type MultiSelectOptions } from './engine';
+
+export interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, MultiSelectOptions {
+  /** Controlled values; without it the field keeps its own (defaultValue). */
+  value?: string[];
+  defaultValue?: string[];
+}
+
+/** <MultiSelect options={people} value={chosen} onChange={setChosen} max={3} />. */
+export function MultiSelect({ options, value, defaultValue, placeholder, label, name, max, closeOnSelect, disabled, onChange, className, ...props }: MultiSelectProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<MultiSelectInstance | null>(null);
+  const change = useLatest(onChange);
+  const start = useRef(value ?? defaultValue ?? []);
+  const optionsKey = JSON.stringify(options ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createMultiSelect(ref.current, { options, value: value ?? start.current, placeholder, label, name, max, closeOnSelect, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [placeholder, label, name, max, closeOnSelect, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (options && instance.current) instance.current.setOptions(options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [optionsKey]);
+  const valueKey = JSON.stringify(value ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (value && instance.current && JSON.stringify(instance.current.value) !== valueKey) instance.current.setValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueKey]);
+  return <div {...props} ref={ref} className={['mk-multi-select', className].filter(Boolean).join(' ')} />;
+}

package/src/components/nav/README.md

@@ -4,13 +4,15 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
 
 | Estilo | Cómo se ve |
 |---|---|
-| `clasica` | Barra lateral con borde; la página actual en una píldora rellena |
-| `bonita` | Píldoras de texto centradas que se ensanchan al pasar y al estar activas (padding con resorte, 0.3 s `cubic(.38,.49,0,1.5)`) |
+| `sidebar` | Barra lateral con borde; la página actual en una píldora rellena |
+| `pills` | Píldoras de texto centradas que se ensanchan al pasar y al estar activas (padding con resorte, 0.3 s `cubic(.38,.49,0,1.5)`) |
 | `dock` | Barra flotante de cristal centrada abajo; el botón activo se ensancha a 80 px |
-| `guapa` | La vista es una tarjeta sobre la cáscara tintada; la página actual es un chip blanco |
-| `tasks` | Riel de botones redondos de 56 px; el activo se cuadra (radio 0.3 s `cubic(.38,.49,0,2)`) |
-| `melon` | Barra lateral suave con un lavado primario en la página actual |
-| `tunnel` | Palabras grandes; la que tiene el ratón y sus vecinas crecen como un dock (1.2 / 1.09 / 1.03) |
+| `card` | La vista es una tarjeta sobre la cáscara tintada; la página actual es un chip blanco |
+| `rail` | Riel de botones redondos de 56 px; el activo se cuadra (radio 0.3 s `cubic(.38,.49,0,2)`) |
+| `wash` | Barra lateral suave con un lavado primario en la página actual |
+| `magnify` | Palabras grandes; la que tiene el ratón y sus vecinas crecen como un dock (1.2 / 1.09 / 1.03) |
+
+Los nombres anteriores a la 0.15 (`clasica`, `bonita`, `guapa`, `tasks`, `melon`, `tunnel`) siguen funcionando: el motor los convierte en `sidebar`, `pills`, `card`, `rail`, `wash` y `magnify` (`NAV_STYLE_ALIASES`, `toNavStyle()`); en el marcado escrito usa ya la clase nueva para que se vea bien antes del JS.
 
 `accent` pinta la página actual en primary-container. Al cambiar de página el icono se rellena (`mk-nav-icon`, 125 ms, `FILL 0 → 1`, para fuentes de iconos como Material Symbols). Con `reveal`, al arrancar la cáscara se descubre desde el primer botón (`revealFrom`).
 
@@ -22,7 +24,7 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
     <header class="mk-shell__header"><h1 class="mk-shell__title">Inicio</h1></header>
     …
   </main>
-  <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" storage-key="mi-app-nav">
+  <mk-nav class="mk-nav mk-nav--pills" nav-style="pills" storage-key="mi-app-nav">
     <div class="mk-nav__buttons">
       <a class="mk-nav__button" href="/" aria-current="page"><svg class="mk-nav__icon">…</svg><span class="mk-nav__name">Inicio</span></a>
       <a class="mk-nav__button" href="/movimientos"><svg class="mk-nav__icon">…</svg><span class="mk-nav__name">Movimientos</span></a>
@@ -42,7 +44,7 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
 
 Escribe la clase `mk-nav--<estilo>` en el marcado para que se vea bien antes de que cargue el JS. Sin custom element: `createNav(document.querySelector('.mk-nav'), opciones)` sobre un `<nav>`.
 
-Partes: `.mk-nav__button--first` (botón de arriba: cuenta, espacio de trabajo), `.mk-nav__buttons`, `.mk-nav__actions` (`.mk-nav__button--action`), `.mk-nav__options` + `.mk-nav__label` (bloque extra que solo muestran clásica, guapa, melon y tunnel), `.mk-nav__icon`, `.mk-nav__name`, `data-mk-hide-mobile` (se esconde en el móvil). Vista: `.mk-shell__view`, `.mk-shell__header`, `.mk-shell__title`, `.mk-shell__content` (cada estilo ajusta su cabecera).
+Partes: `.mk-nav__button--first` (botón de arriba: cuenta, espacio de trabajo), `.mk-nav__buttons`, `.mk-nav__actions` (`.mk-nav__button--action`), `.mk-nav__options` + `.mk-nav__label` (bloque extra que solo muestran sidebar, card, wash y magnify), `.mk-nav__icon`, `.mk-nav__name`, `data-mk-hide-mobile` (se esconde en el móvil). Vista: `.mk-shell__view`, `.mk-shell__header`, `.mk-shell__title`, `.mk-shell__content` (cada estilo ajusta su cabecera).
 
 ## React
 
@@ -52,7 +54,7 @@ const [page, setPage] = useState('home');
 <div className="mk-shell" style={{ height: '100dvh' }}>
   <main className="mk-shell__view">…</main>
   <Nav
-    navStyle="tasks"
+    navStyle="rail"
     items={[
       { value: 'home', label: 'Inicio', icon: <HomeIcon /> },
       { value: 'movements', label: 'Movimientos', icon: <RowsIcon /> },
@@ -76,7 +78,7 @@ const [page, setPage] = useState('home');
 
 ## Variables CSS
 
-`--mk-nav-icon-size` (24px; 16px en guapa y melon con acento). Colores de los roles Material (`surface-container-*`, `primary-container`, `tertiary-container`…).
+`--mk-nav-icon-size` (24px; 16px en card y wash con acento). Colores de los roles Material (`surface-container-*`, `primary-container`, `tertiary-container`…).
 
 ## Accesibilidad
 

package/src/components/nav/element.ts

@@ -1,8 +1,8 @@
 import { MkElement, defineElement, type OptionType } from '../../elements/base';
-import { createNav, type NavInstance, type NavStyle } from './engine';
+import { createNav, type NavInstance, type NavStyle, type NavStyleAlias } from './engine';
 
 /**
- * <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" [accent] [reveal] [storage-key="mi-app-nav"]>
+ * <mk-nav class="mk-nav mk-nav--pills" nav-style="pills" [accent] [reveal] [storage-key="mi-app-nav"]>
  *   <div class="mk-nav__buttons"><a class="mk-nav__button" href="/">…</a></div>
  * </mk-nav>
  * Emits `mk:navigate` (detail: index, value, item, originalEvent) on click.
@@ -12,7 +12,7 @@ export class MkNavElement extends MkElement<NavInstance> {
 
   protected create(options: Record<string, unknown>) {
     return createNav(this, {
-      style: options.navStyle as NavStyle | undefined,
+      style: options.navStyle as NavStyle | NavStyleAlias | undefined,
       accent: options.accent as boolean | undefined,
       reveal: Boolean(options.reveal),
       storageKey: options.storageKey as string | undefined,
@@ -22,7 +22,7 @@ export class MkNavElement extends MkElement<NavInstance> {
   // Style and accent change in place: rebuilding would replay the reveal.
   attributeChangedCallback(name: string, previous: string | null, next: string | null) {
     if (previous === next || !this.instance) return;
-    if (name === 'nav-style' && next) this.instance.setStyle(next as NavStyle);
+    if (name === 'nav-style' && next) this.instance.setStyle(next as NavStyle | NavStyleAlias);
     else if (name === 'accent') this.instance.setAccent(next !== null && next !== 'false');
     else super.attributeChangedCallback(name, previous, next);
   }
@@ -31,7 +31,7 @@ export class MkNavElement extends MkElement<NavInstance> {
     this.instance?.select(target);
   }
 
-  setStyle(style: NavStyle) {
+  setStyle(style: NavStyle | NavStyleAlias) {
     this.instance?.setStyle(style);
   }
 }