@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/src/components/chart/parts.ts

@@ -0,0 +1,237 @@
+import { gsap, EASE } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import type { Scope } from '../../core/scope';
+
+/*
+ * The parts the round and flow charts (pie, radar, radial, sankey, heatmap)
+ * share with chart: the same plot, inverse-glass tooltip, outlined legend,
+ * screen-reader table and colour slots, so they read as one family and use
+ * chart.css. Each chart draws its own marks.
+ */
+
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const SLOTS = 8;
+
+export const svg = <K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string | number> = {}) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
+  return element;
+};
+export const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+export const round = (n: number) => Math.round(n * 100) / 100;
+
+/** The colour of slot `i`: monochrome alone, --mk-chart-N for up to 8, a neutral past them. */
+export const slotColor = (i: number, total = SLOTS) => (total === 1 ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)');
+
+export const formatNumber = (value: number) => new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+
+/** A point on a circle: angle 0 is 12 o'clock, clockwise. */
+export const polar = (cx: number, cy: number, r: number, angle: number) => [cx + r * Math.sin(angle), cy - r * Math.cos(angle)] as const;
+
+/** An annular sector (a pie slice when `inner` is 0) from angle `a0` to `a1`. */
+export function arcPath(cx: number, cy: number, outer: number, inner: number, a0: number, a1: number) {
+  const sweep = Math.min(a1 - a0, Math.PI * 2 - 1e-4);
+  const end = a0 + sweep;
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, a0);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  if (inner <= 0) return `M${round(cx)},${round(cy)}L${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}Z`;
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, a0);
+  return `M${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}L${round(x2)},${round(y2)}A${round(inner)},${round(inner)} 0 ${large} 0 ${round(x3)},${round(y3)}Z`;
+}
+
+export interface TipRow {
+  name: string;
+  color?: string;
+  value: string;
+}
+
+export interface ChartFrame {
+  plot: HTMLDivElement;
+  canvas: SVGSVGElement;
+  tooltip: HTMLDivElement;
+  empty: HTMLParagraphElement;
+  legend: HTMLUListElement;
+  table: HTMLTableElement;
+  live: HTMLSpanElement;
+  /** Fill and show the tooltip near (x, y) in plot px; null hides it. */
+  tip(at: { x: number; y: number; title: string; rows: TipRow[] } | null): void;
+  /** One outlined pill per item; `type` picks the swatch's shape. */
+  fillLegend(items: Array<{ name: string; color: string }>, show: boolean, type?: string): HTMLLIElement[];
+  /** The values for screen readers: a caption, the column heads and the rows. */
+  fillTable(caption: string, head: string[], rows: string[][]): void;
+  keep(animation: gsap.core.Animation | null | undefined): void;
+}
+
+/** The plot, tooltip, legend and table of a chart, removed by the scope. The root gets .mk-chart for chart.css. */
+export function chartFrame(root: HTMLElement, scope: Scope, kind: string): ChartFrame {
+  if (!root.classList.contains('mk-chart')) {
+    root.classList.add('mk-chart');
+    scope.add(() => {
+      root.classList.remove('mk-chart');
+      if (!root.classList.length) root.removeAttribute('class');
+    });
+  }
+  scope.attr(root, 'data-mk-chart-type', kind);
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, parent: Element = root) => {
+    const element = document.createElement(tag);
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const plot = made('div');
+  plot.dataset.mkChartPlot = '';
+  const canvas = svg('svg');
+  canvas.dataset.mkChartSvg = '';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('tabindex', '0');
+  canvas.setAttribute('focusable', 'true');
+  plot.append(canvas);
+  const tooltip = made('div', plot);
+  tooltip.dataset.mkChartTooltip = '';
+  tooltip.setAttribute('aria-hidden', 'true');
+  tooltip.hidden = true;
+  const empty = made('p');
+  empty.dataset.mkChartEmpty = '';
+  empty.hidden = true;
+  const legend = made('ul');
+  legend.dataset.mkChartLegend = '';
+  const table = made('table');
+  table.dataset.mkChartTable = '';
+  table.className = 'mk-sr-only';
+  const live = made('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  scope.attr(root, 'data-mk-ready', '');
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null | undefined) => {
+    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();
+    gsap.killTweensOf(tooltip);
+  });
+
+  const tip: ChartFrame['tip'] = (at) => {
+    if (!at) {
+      if (!tooltip.hidden && !reduced()) {
+        gsap.killTweensOf(tooltip, 'opacity,scale');
+        keep(gsap.to(tooltip, { opacity: 0, scale: 0.94, duration: 0.15, ease: 'power2.in', onComplete: () => {
+          tooltip.hidden = true;
+        } }));
+      } else tooltip.hidden = true;
+      return;
+    }
+    tooltip.replaceChildren();
+    const title = document.createElement('strong');
+    title.textContent = at.title;
+    tooltip.append(title);
+    for (const each of at.rows) {
+      const row = document.createElement('span');
+      row.dataset.mkChartRow = '';
+      const swatch = document.createElement('i');
+      if (!each.color || /--mk-(text|chart-mono|muted)/.test(each.color)) swatch.dataset.mkMono = '';
+      else swatch.style.background = each.color;
+      const name = document.createElement('span');
+      name.textContent = each.name;
+      const amount = document.createElement('b');
+      amount.textContent = each.value;
+      row.append(swatch, name, amount);
+      tooltip.append(row);
+    }
+    const appearing = tooltip.hidden;
+    tooltip.hidden = false;
+    const width = plot.clientWidth || 300;
+    const height = plot.clientHeight || 240;
+    const tipW = tooltip.offsetWidth || 160;
+    const tipH = tooltip.offsetHeight || 60;
+    // Beside the point, towards the middle of the plot, inside it.
+    const left = round(Math.max(0, Math.min(width - tipW, at.x > width / 2 ? at.x - 16 - tipW : at.x + 16)));
+    const top = round(Math.max(0, Math.min(height - tipH, at.y - tipH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tooltip);
+      gsap.set(tooltip, { x: left, y: top });
+      if (!reduced()) keep(gsap.fromTo(tooltip, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.25, ease: EASE.pop }));
+      else gsap.set(tooltip, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(tooltip, 'opacity,scale');
+      gsap.set(tooltip, { opacity: 1, scale: 1 });
+      keep(gsap.to(tooltip, { x: left, y: top, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    }
+  };
+
+  const fillLegend: ChartFrame['fillLegend'] = (items, show, type = 'bar') => {
+    legend.replaceChildren();
+    legend.hidden = !show || !items.length;
+    if (legend.hidden) return [];
+    return items.map((item) => {
+      const li = document.createElement('li');
+      const swatch = document.createElement('span');
+      swatch.dataset.mkChartSwatch = '';
+      swatch.dataset.mkType = type;
+      swatch.style.background = item.color;
+      swatch.style.color = item.color;
+      swatch.setAttribute('aria-hidden', 'true');
+      const name = document.createElement('span');
+      name.textContent = item.name;
+      li.append(swatch, name);
+      legend.append(li);
+      return li;
+    });
+  };
+
+  const fillTable: ChartFrame['fillTable'] = (caption, head, rows) => {
+    table.replaceChildren();
+    const cap = document.createElement('caption');
+    cap.textContent = caption;
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const text of head) {
+      const th = document.createElement('th');
+      th.scope = 'col';
+      th.textContent = text;
+      headRow.append(th);
+    }
+    thead.append(headRow);
+    const body = document.createElement('tbody');
+    for (const cells of rows) {
+      const row = document.createElement('tr');
+      cells.forEach((text, i) => {
+        const cell = document.createElement(i ? 'td' : 'th');
+        if (!i) (cell as HTMLTableCellElement).scope = 'row';
+        cell.textContent = text;
+        row.append(cell);
+      });
+      body.append(row);
+    }
+    table.append(cap, thead, body);
+  };
+
+  return { plot, canvas, tooltip, empty, legend, table, live, tip, fillLegend, fillTable, keep };
+}
+
+/** Calls `draw` again when the root changes width (on the next frame, once). */
+export function onWidth(root: HTMLElement, scope: Scope, draw: () => void) {
+  if (typeof ResizeObserver !== 'function') return;
+  let width = 0;
+  let frame = 0;
+  const observer = scope.observe(
+    new ResizeObserver(() => {
+      const next = Math.round(root.clientWidth);
+      if (!next || next === width) return;
+      const first = !width;
+      width = next;
+      if (first) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(draw);
+    }),
+  );
+  observer.observe(root);
+  scope.add(() => cancelAnimationFrame(frame));
+}

package/src/components/chart/react.tsx

@@ -11,13 +11,13 @@ export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSele
  * <Chart type="bar" stacked labels={weeks} series={[{ name: 'Ana', values }]} formatValue={money} label="Sesiones por semana" />.
  * Data changes redraw in place; the selection survives when its point still exists.
  */
-export function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, onSelect, instanceRef, className, ...props }: ChartProps) {
+export function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }: ChartProps) {
   const ref = useRef<HTMLDivElement>(null);
   const instance = useRef<ChartInstance | null>(null);
   const format = useLatest(formatValue);
   const select = useLatest(onSelect);
   const formatted = formatValue !== undefined;
-  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip };
+  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip, axis, endLabel };
   const key = JSON.stringify(data);
   const latest = useLatest(data);
   const options = (): ChartOptions => ({

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