@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/components/chart/use-chart.ts

@@ -0,0 +1,55 @@
+'use client';
+import { useRef, type RefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import type { Instance } from '../../core/types';
+
+interface Updatable<O> extends Instance {
+  update(options: O): void;
+}
+
+/**
+ * The React side of the round and flow charts: the engine is created once and
+ * data changes are pushed with update(), so the chart glides instead of being
+ * drawn again. `data` is compared as JSON; callbacks always call the latest.
+ */
+export function useChart<O extends object, I extends Updatable<O>>(
+  create: (root: HTMLElement | null, options: O) => I,
+  data: O,
+  callbacks: { formatValue?: (value: number) => string; onSelect?: (...args: never[]) => void },
+  instanceRef?: { current: I | null },
+): RefObject<HTMLDivElement | null> {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<I | null>(null);
+  const format = useLatest(callbacks.formatValue);
+  const select = useLatest(callbacks.onSelect);
+  const formatted = callbacks.formatValue !== undefined;
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = (): O => ({
+    ...latest.current,
+    formatValue: formatted ? (value: number) => format.current?.(value) ?? String(value) : undefined,
+    onSelect: (...args: never[]) => (select.current as ((...a: never[]) => void) | undefined)?.(...args),
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = create(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // Created once; data is pushed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, formatted]);
+  return ref;
+}

package/src/components/data-table/README.md

@@ -2,7 +2,7 @@
 
 Tabla avanzada con ordenamiento, búsqueda, filtros, selección, paginación, acciones por fila y columnas configurables. Al ordenar, las filas se deslizan a su nuevo lugar (el resorte de layout del kit, .62 s) y la flecha del encabezado gira. La búsqueda resalta lo que coincide (sin importar tildes ni mayúsculas) y las filas que quedan se reacomodan juntas. Los filtros usan `filter-builder` dentro de un panel que crece desde su botón: la tabla responde mientras editas y una frase dice qué está filtrado («Estado es Enviado y Monto mayor que 500»).
 
-Las casillas se dibujan solas y hacen pop; la del encabezado queda a medias cuando solo hay algunas filas elegidas. Al elegir filas, sube desde un blur una barra con el conteo (que rueda) y las acciones masivas, y ofrece elegir todos los resultados cuando la página entera está marcada. Al cambiar de página, las filas entran por el lado hacia el que vas. Las filas eliminadas salen deslizándose y las demás cierran el hueco. Mientras carga hay *skeletons* que brillan, y sin nada que mostrar aparece un estado vacío que explica por qué y ofrece limpiar los filtros.
+Las casillas se dibujan solas y hacen pop; la del encabezado queda a medias cuando solo hay algunas filas elegidas. Una fila elegida se tiñe apenas y lleva un borde de acento a la izquierda, sin tapar sus datos. Al elegir filas, la barra con el conteo (que rueda) y las acciones masivas aparece con un blur en el lugar de la barra de herramientas, así nunca cubre filas, y ofrece elegir todos los resultados cuando la página entera está marcada. Al cambiar de página, las filas entran por el lado hacia el que vas; si la tabla cabe en su panel, el desborde se oculta mientras viajan para que no parpadee una barra de desplazamiento (si ya es más ancha, aparecen con un fundido). Las filas eliminadas salen deslizándose y las demás cierran el hueco. Mientras carga hay *skeletons* que brillan, y sin nada que mostrar aparece un estado vacío que explica por qué y ofrece limpiar los filtros.
 
 ## HTML / Astro
 
@@ -56,7 +56,7 @@ Unas `rows` nuevas entran en su sitio y se conservan el orden, los filtros y la
 | `rowKey` | `row-key` | `'id'` | Clave (o función) del id de cada fila. |
 | `caption` | `caption` | `'Tabla'` | Nombre accesible. |
 | `pageSize` | `page-size` | `10` | Filas por página (`0`: todas). |
-| `pageSizes` | `page-sizes` (JSON) | `[10, 25, 50]` | Opciones de filas por página. |
+| `pageSizes` | `page-sizes` (JSON) | `[10, 25, 50]` | Opciones del menú «Filas» (un botón que abre un menú como Filtros y Columnas, con la opción actual marcada). |
 | `selectable` | `selectable` | `false` | Casillas para elegir filas. |
 | `search` | `search` | `true` | Campo de búsqueda (un texto es su marcador). |
 | `filters` | `filters` | `true` | Botón «Filtros» con `filter-builder`. |
@@ -80,4 +80,4 @@ Unas `rows` nuevas entran en su sitio y se conservan el orden, los filtros y la
 
 ## Accesibilidad
 
-Una tabla real con `caption`, encabezados `th scope="col"` con `aria-sort` y botones para ordenar; casillas con etiqueta («Seleccionar Ana Gómez»); el botón de acciones dice de qué fila es y abre un menú de WAI-ARIA; la barra de selección es un `toolbar` con nombre. Si la tabla es más ancha que su contenedor, se desplaza de lado dentro de una región enfocable. Un estado discreto anuncia el orden, los resultados, la página y la selección. Con movimiento reducido los cambios son inmediatos.
+Una tabla real con `caption`, encabezados `th scope="col"` con `aria-sort` y botones para ordenar; casillas con etiqueta («Seleccionar Ana Gómez»); el botón de acciones dice de qué fila es y abre un menú de WAI-ARIA; «Filas» es un botón con `aria-haspopup="menu"` y sus opciones son `menuitemradio` con `aria-checked`; la barra de selección es un `toolbar` con nombre. Si la tabla es más ancha que su contenedor, se desplaza de lado dentro de una región enfocable. Un estado discreto anuncia el orden, los resultados, la página y la selección. Con movimiento reducido los cambios son inmediatos.

package/src/components/data-table/data-table.css

@@ -1,9 +1,11 @@
 /* data-table — a toolbar (a 12 px search on surface-3, 12 px tool buttons with an accent count), the filter sentence
    on accent-soft, then the table on a 20 px panel: a sticky muted header with sort buttons whose arrow turns, 3rem
-   rows on hairlines, chosen rows tinted, 18 px checks that draw themselves, an 8 px row menu button and shimmering
-   bones while loading; the foot with the range, rows per page and the pager; the bar of the chosen rows on inverse
-   glass. Panels (columns, filters) are anchored .mk-dialog (dialog.css) surfaces with 20 px corners. The table
-   scrolls sideways inside its panel when it is wider; --mk-dt-max-height lets it scroll down too. */
+   rows on hairlines, chosen rows softly tinted with an accent edge (their data stays readable), 18 px checks that
+   draw themselves, an 8 px row menu button and shimmering bones while loading; the foot with the range, the rows
+   per page menu and the pager; the bar of the chosen rows takes the toolbar's place, so it never covers a row.
+   Panels and menus (columns, filters, rows per page, row actions) are anchored .mk-dialog (dialog.css) surfaces with
+   20 px corners and 8 px items. The table scrolls sideways inside its panel when it is wider; --mk-dt-max-height
+   lets it scroll down too. */
 .mk-data-table,
 mk-data-table {
   --mk-dt-max-height: none;
@@ -17,6 +19,8 @@ mk-data-table {
 
 /* ── The toolbar ─────────────────────────────────────────────────────────── */
 [data-mk-dt-bar] {
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -86,6 +90,7 @@ mk-data-table {
 }
 
 [data-mk-dt-tool]:focus-visible,
+[data-mk-dt-size-button]:focus-visible,
 [data-mk-dt-sort]:focus-visible,
 [data-mk-dt-row-menu]:focus-visible,
 [data-mk-dt-pager] button:focus-visible,
@@ -223,8 +228,17 @@ mk-data-table {
   background: color-mix(in srgb, var(--mk-text) 3%, transparent);
 }
 
+/* A chosen row: a light tint and an accent edge, never a fill that hides the data (on OLED the accent is white). */
 [data-mk-dt-table] tbody tr[data-selected] {
-  background: color-mix(in srgb, var(--mk-accent-soft) 60%, transparent);
+  background: color-mix(in srgb, var(--mk-accent) 7%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected]:hover {
+  background: color-mix(in srgb, var(--mk-accent) 11%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected] > :first-child {
+  box-shadow: inset 3px 0 0 var(--mk-accent);
 }
 
 [data-mk-dt-table] td mark {
@@ -296,7 +310,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 1.5px solid var(--mk-outline);
+  border: 2px solid var(--mk-outline);
   border-radius: 5px;
   color: transparent;
   vertical-align: middle;
@@ -317,6 +331,9 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 [data-mk-dt-check] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -422,14 +439,35 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   margin-left: auto;
 }
 
-[data-mk-dt-size] select {
+[data-mk-dt-size-button] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   height: 2rem;
-  padding: 0 0.5rem;
+  padding: 0 0.375rem 0 0.75rem;
   border: 1px solid var(--mk-outline-soft);
   border-radius: 8px;
   background: var(--mk-surface-1);
   color: var(--mk-text);
   font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-size-button]:hover,
+[data-mk-dt-size-button][aria-expanded='true'] {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-size-button] svg {
+  flex: none;
+  color: var(--mk-muted);
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-size-button][aria-expanded='true'] svg {
+  transform: rotate(180deg);
 }
 
 [data-mk-dt-pager] {
@@ -463,24 +501,28 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 /* ── The bar of the chosen rows ──────────────────────────────────────────── */
+/* It shares the toolbar's grid cell and covers it while rows are chosen: the rows stay in view. */
 [data-mk-dt-bulk] {
-  position: absolute;
-  right: 0;
-  bottom: 3.25rem;
-  left: 0;
-  z-index: 3;
+  position: relative;
+  z-index: 2;
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  align-self: stretch;
   gap: 0.25rem 0.5rem;
-  width: max-content;
-  max-width: calc(100% - 1rem);
-  margin-inline: auto;
-  padding: 0.375rem 0.375rem 0.375rem 1rem;
-  border-radius: 20px;
-  background: var(--mk-glass-inverse, var(--mk-text));
-  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
-  color: var(--mk-on-glass-inverse, var(--mk-surface-1));
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.25rem 0.25rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+.mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar],
+mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar] {
+  visibility: hidden;
 }
 
 [data-mk-dt-bulk-label] {
@@ -504,12 +546,17 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   height: 2rem;
   padding: 0 0.75rem;
   border: 0;
-  border-radius: 12px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
   color: inherit;
   font: inherit;
   font-weight: 500;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-bulk] button:hover {
+  background: var(--mk-surface-2);
 }
 
 [data-mk-dt-bulk] button[data-danger] {
@@ -517,23 +564,31 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   color: var(--mk-on-error, #fff);
 }
 
-[data-mk-dt-select-all] {
+[data-mk-dt-bulk] [data-mk-dt-select-all] {
+  background: none;
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 
-[data-mk-dt-bulk-close] {
+/* The close button is a square with its cross in the middle (the bar's button padding must not reach it). */
+[data-mk-dt-bulk] [data-mk-dt-bulk-close] {
   display: inline-grid;
   place-items: center;
   width: 2rem;
+  margin-left: auto;
   padding: 0;
 }
 
+[data-mk-dt-bulk-close] svg {
+  display: block;
+}
+
 /* ── Panels and the row menu ─────────────────────────────────────────────── */
 .mk-dialog.mk-dt-panel {
   --mk-dialog-radius: 20px;
   --mk-dialog-bg: var(--mk-surface-1);
-  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  /* A hairline keeps the panel apart from the table under it (on OLED both are near black). */
+  --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
   gap: 0.5rem;
   width: max-content;
   min-width: min(14rem, calc(100vw - 32px));
@@ -574,6 +629,45 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   background: var(--mk-surface-2);
 }
 
+/* The row menu and the rows per page menu look like the panels: 20 px surface, 8 px items, the same hover. */
+.mk-dialog.mk-dt-panel.mk-dt-menu {
+  gap: 0.125rem;
+  min-width: 9rem;
+  padding: 0.375rem;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] {
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item]:hover,
+.mk-dialog.mk-dt-menu [data-mk-item]:focus-visible {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] svg {
+  flex: none;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] {
+  font-weight: 600;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] svg {
+  opacity: 1;
+}
+
 .mk-dialog.mk-dt-menu [data-mk-item][data-danger] {
   color: var(--mk-error);
 }
@@ -584,6 +678,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   }
 
   [data-mk-dt-sort] svg,
+  [data-mk-dt-size-button] svg,
   [data-mk-dt-check] {
     transition: none;
   }

package/src/components/data-table/engine.ts

@@ -147,9 +147,11 @@ const ICONS = {
   next: SVG('<path d="M9 6l6 6-6 6"/>'),
   close: SVG('<path d="M7 7l10 10M17 7L7 17"/>', 14),
   arrow: SVG('<path d="M12 19V5M6 11l6-6 6 6"/>', 12),
+  chevron: SVG('<path d="M7 10l5 5 5-5"/>', 14),
+  check: SVG('<path d="M5 12.5l4.5 4.5L19 7.5"/>', 16),
 };
 const CHECK =
-  '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path data-mk-dt-tick d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/><path data-mk-dt-dash d="M6 12h12"/></svg>';
+  '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path data-mk-dt-tick d="M5.5 12l4 4L18.5 7.5" pathLength="1"/><path data-mk-dt-dash d="M6.5 12h11"/></svg>';
 const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
 let sequence = 0;
 
@@ -343,21 +345,18 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
 
   const foot = el('div', 'data-mk-dt-foot');
   const range = el('span', 'data-mk-dt-range');
-  const sizeField = el('label', 'data-mk-dt-size');
+  const sizeField = el('div', 'data-mk-dt-size');
   sizeField.append(el('span', undefined, 'Filas'));
-  const sizeSelect = el('select');
-  for (const size of pageSizes) {
-    const option = el('option', undefined, String(size));
-    option.value = String(size);
-    sizeSelect.append(option);
-  }
-  if (!pageSizes.includes(pageSize) && pageSize) {
-    const option = el('option', undefined, String(pageSize));
-    option.value = String(pageSize);
-    sizeSelect.prepend(option);
-  }
-  sizeSelect.value = String(pageSize);
-  sizeField.append(sizeSelect);
+  const sizeButton = el('button', 'data-mk-dt-size-button');
+  sizeButton.type = 'button';
+  sizeButton.setAttribute('aria-haspopup', 'menu');
+  sizeButton.setAttribute('aria-expanded', 'false');
+  const sizeValue = el('span', 'data-mk-dt-size-value', String(pageSize));
+  sizeButton.append(sizeValue);
+  sizeButton.insertAdjacentHTML('beforeend', ICONS.chevron);
+  sizeButton.setAttribute('aria-label', `Filas por página: ${pageSize}`);
+  sizeField.append(sizeButton);
+  const sizes = pageSize && !pageSizes.includes(pageSize) ? [pageSize, ...pageSizes] : [...pageSizes];
   const pager = el('nav', 'data-mk-dt-pager');
   pager.setAttribute('aria-label', 'Páginas');
   const previous = el('button', 'data-mk-dt-previous');
@@ -400,7 +399,7 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
   const status = el('span');
   status.className = 'mk-sr-only';
   status.setAttribute('role', 'status');
-  root.append(bar, active, scroll, emptyHost, foot, bulk, status);
+  root.append(bar, bulk, active, scroll, emptyHost, foot, status);
   scope.attr(root, 'data-mk-ready', '');
   scope.add(() => {
     for (const effect of effects) effect.kill();
@@ -610,15 +609,17 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
     gsap.killTweensOf(bulk);
     if (show) {
       bulk.hidden = false;
-      if (animate && !reduced()) keep(gsap.fromTo(bulk, { opacity: 0, y: 16, filter: 'blur(8px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.35, ease: EASE.pop, clearProps: 'opacity,transform,filter' }));
+      if (animate && !reduced()) keep(gsap.fromTo(bulk, { opacity: 0, y: -8, filter: 'blur(8px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.35, ease: EASE.pop, clearProps: 'opacity,transform,filter' }));
     } else if (animate && !reduced()) {
-      keep(gsap.to(bulk, { opacity: 0, y: 16, filter: 'blur(6px)', duration: 0.22, ease: 'power2.in', onComplete: () => {
+      keep(gsap.to(bulk, { opacity: 0, y: -8, filter: 'blur(6px)', duration: 0.22, ease: 'power2.in', onComplete: () => {
         bulk.hidden = true;
         gsap.set(bulk, { clearProps: 'opacity,transform,filter' });
       } }));
     } else bulk.hidden = true;
   };
 
+  let slides = 0;
+  scope.add(() => scroll.style.removeProperty('overflow-x'));
   /** Draw the page; `motion`: how the rows change (glide, slide from a side, or nothing). */
   const render = (motion: 'reflow' | 'forward' | 'back' | 'none' = 'none') => {
     const all = loading ? [] : results();
@@ -645,7 +646,19 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
           }),
         );
       } else if (motion === 'forward' || motion === 'back') {
-        keep(gsap.fromTo(fresh, { opacity: 0, x: motion === 'forward' ? 24 : -24 }, { opacity: 1, x: 0, duration: 0.32, stagger: 0.015, ease: 'power2.out', clearProps: 'opacity,transform' }));
+        // Sliding rows stick out past the side: a table that fits its panel hides the overflow while they travel
+        // (no scrollbar blinks); a wider one, which already scrolls, fades them in place instead.
+        const fits = scroll.scrollWidth <= scroll.clientWidth + 1;
+        const token = ++slides;
+        if (fits) scroll.style.overflowX = 'hidden';
+        const release = () => {
+          if (token === slides) scroll.style.removeProperty('overflow-x');
+        };
+        keep(
+          gsap.fromTo(fresh, fits ? { opacity: 0, x: motion === 'forward' ? 24 : -24 } : { opacity: 0, y: 6 }, {
+            opacity: 1, x: 0, y: 0, duration: 0.32, stagger: 0.015, ease: 'power2.out', clearProps: 'opacity,transform', onComplete: release, onInterrupt: release,
+          }),
+        );
       } else if (wasLoading) keep(gsap.fromTo(fresh, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.35, stagger: 0.025, ease: 'power2.out', clearProps: 'opacity,transform' }));
     }
     options.onRender?.(body);
@@ -793,11 +806,7 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
     keep(press(next));
     setPage(page + 1);
   });
-  scope.on(sizeSelect, 'change', () => {
-    pageSize = Number(sizeSelect.value) || 0;
-    page = 0;
-    render('reflow');
-  });
+
   scope.on(clearButton, 'click', clearAll);
   scope.on(bulkClose, 'click', () => setSelection([]));
   scope.on(bulkAll, 'click', () => setSelection(results().map(idOf)));
@@ -821,11 +830,57 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
     return dialog;
   };
 
+  const sizeDialog = panelDialog('size', 'Filas por página');
+  sizeDialog.className = 'mk-dialog mk-menu mk-dt-panel mk-dt-menu';
+  const sizeItems = sizes.map((size) => {
+    const item = el('button', 'data-mk-item');
+    item.type = 'button';
+    item.dataset.mkValue = String(size);
+    item.append(el('span', undefined, String(size)));
+    item.insertAdjacentHTML('beforeend', ICONS.check);
+    sizeDialog.append(item);
+    return item;
+  });
+  const paintSize = () => {
+    for (const item of sizeItems) {
+      const on = Number(item.dataset.mkValue) === pageSize;
+      item.setAttribute('role', 'menuitemradio');
+      item.setAttribute('aria-checked', String(on));
+    }
+  };
+  /** A new page size from the menu (animated) or the API. */
+  const changePageSize = (size: number, animate: boolean) => {
+    const next = Math.max(0, Math.floor(size));
+    const text = String(next);
+    if (animate && next !== pageSize && !reduced()) keep(rollDigits(sizeValue, text, next > pageSize ? 1 : -1, 0.3));
+    else sizeValue.textContent = text;
+    sizeButton.setAttribute('aria-label', `Filas por página: ${next}`);
+    pageSize = next;
+    page = 0;
+    paintSize();
+    render('reflow');
+  };
+  const sizeMenu = createMenu(sizeDialog, {
+    triggers: false,
+    // The menu marks every item a plain menuitem when it opens: these are a choice.
+    onOpen: paintSize,
+    onClose: () => sizeButton.setAttribute('aria-expanded', 'false'),
+    onSelect: (value) => changePageSize(Number(value) || 0, true),
+  });
+  paintSize();
+  scope.on(sizeDialog, 'mk:select', (event) => event.stopPropagation());
+  scope.add(() => sizeMenu.destroy());
+  scope.on(sizeButton, 'click', () => {
+    keep(press(sizeButton));
+    sizeButton.setAttribute('aria-expanded', 'true');
+    sizeMenu.open(sizeButton);
+  });
+
   let rowMenu: ReturnType<typeof createMenu> | null = null;
   let menuRow: T | null = null;
   if (options.actions?.length) {
     const dialog = panelDialog('menu', 'Acciones de la fila');
-    dialog.className = 'mk-dialog mk-menu mk-dt-menu';
+    dialog.className = 'mk-dialog mk-menu mk-dt-panel mk-dt-menu';
     for (const action of options.actions) {
       const item = el('button', 'data-mk-item', action.label);
       item.type = 'button';
@@ -1005,10 +1060,7 @@ export function createDataTable<T extends DataRow = DataRow>(root: HTMLElement |
     sortBy,
     setPage,
     setPageSize(size) {
-      pageSize = Math.max(0, Math.floor(size));
-      sizeSelect.value = String(pageSize);
-      page = 0;
-      render('reflow');
+      changePageSize(size, false);
     },
     setQuery(next) {
       query = next;

package/src/components/editable-table/engine.ts

@@ -2,6 +2,7 @@ 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 { createMenu, type MenuInstance } from '../menu/engine';
 import { fromJson } from '../../core/dates';
 import { toTime } from '../../core/relative-time';
 import { press, rollDigits, shake } from '../../motion/micro';
@@ -395,18 +396,13 @@ export function createEditableTable<T extends DataRow = DataRow>(root: HTMLEleme
       setValue(id, column!.key, !value);
       return;
     }
-    let editor: HTMLInputElement | HTMLSelectElement;
+    // A choice opens the kit's menu on the cell (like every other select of the kit), not a system list.
     if (kind === 'select') {
-      const select = document.createElement('select');
-      for (const option of column!.options ?? []) {
-        const element = document.createElement('option');
-        element.value = option.value;
-        element.textContent = option.label;
-        select.append(element);
-      }
-      select.value = String(value ?? '');
-      editor = select;
-    } else {
+      openChoices(cell, id, column!, String(value ?? ''));
+      return;
+    }
+    let editor: HTMLInputElement | HTMLSelectElement;
+    {
       const input = document.createElement('input');
       input.type = kind === 'number' ? 'text' : kind === 'date' ? 'date' : 'text';
       if (kind === 'number') input.inputMode = 'decimal';
@@ -479,6 +475,66 @@ export function createEditableTable<T extends DataRow = DataRow>(root: HTMLEleme
   };
   const finishEdit = (save: boolean) => editing?.done(save);
 
+  // ── Choices: one menu, filled with the column's options when a choice cell is edited ──────────────
+  const CHECK = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+  let choices: { menu: MenuInstance; dialog: HTMLDialogElement } | null = null;
+  let choosing: { id: RowId; key: string; value: string } | null = null;
+  const markChoices = (dialog: HTMLElement) => {
+    for (const item of dialog.querySelectorAll<HTMLElement>('[data-mk-item]')) {
+      item.setAttribute('role', 'menuitemradio');
+      item.setAttribute('aria-checked', String(item.dataset.mkValue === choosing?.value));
+    }
+  };
+  const choiceMenu = () => {
+    if (choices) return choices;
+    const dialog = document.createElement('dialog');
+    dialog.className = 'mk-dialog mk-menu mk-select-menu';
+    dialog.dataset.mkEtChoices = '';
+    root.append(dialog);
+    scope.add(() => dialog.remove());
+    const menu = createMenu(dialog, {
+      triggers: false,
+      onOpen: () => markChoices(dialog),
+      onSelect: (value) => {
+        const target = choosing;
+        if (target && value !== target.value) setValue(target.id, target.key, value);
+      },
+      onClose: () => {
+        const target = choosing;
+        choosing = null;
+        // Focus comes back to the cell (drawn again after a change).
+        const fresh = target ? cellOf(target.id, target.key) : null;
+        if (fresh) focusCell(fresh, false);
+      },
+    });
+    // The menu's selection stays inside: listeners on the table hear the table's events.
+    scope.on(dialog, 'mk:select', (event) => event.stopPropagation());
+    scope.add(() => menu.destroy());
+    choices = { menu, dialog };
+    return choices;
+  };
+  const openChoices = (cell: HTMLTableCellElement, id: RowId, column: EditableColumn<T>, value: string) => {
+    const { menu, dialog } = choiceMenu();
+    dialog.setAttribute('aria-label', column.label);
+    dialog.replaceChildren(
+      ...(column.options ?? []).map((option) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.dataset.mkItem = '';
+        item.dataset.mkValue = option.value;
+        const text = document.createElement('span');
+        text.textContent = option.label;
+        item.append(text);
+        item.insertAdjacentHTML('beforeend', CHECK);
+        return item;
+      }),
+    );
+    choosing = { id, key: column.key, value };
+    markChoices(dialog);
+    dialog.style.setProperty('--mk-select-width', `${cell.offsetWidth}px`);
+    menu.open(cell);
+  };
+
   const moveFrom = (cell: HTMLTableCellElement, move: 'down' | 'right' | 'left' | 'up') => {
     const { row, column, rows, cells } = positionOf(cell);
     if (move === 'right' || move === 'left') {