@yewdiel21/motion-kit 0.14.0 → 0.15.0

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') {

package/src/components/filter-builder/engine.ts

@@ -7,6 +7,7 @@ import {
   type FilterField, type FilterGroup, type FilterNode, type FilterRule,
 } from '../../core/filter';
 import { blurIn, collapse, press, rollDigits, shake } from '../../motion/micro';
+import { createSelect, type SelectInstance } from '../select/engine';
 import { slideIndicator } from '../../motion/indicator';
 
 /*
@@ -102,6 +103,28 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value: cloneFilter(model), summary: describeFilter(model, fields) } }));
   };
 
+  // ── Choices: every <select> is the kit's select (it opens the kit's menu), kept in step with the select itself, so
+  // the change handlers below read it as always. Each one lives as long as its row.
+  const selects = new Map<HTMLElement, SelectInstance>();
+  const choice = (select: HTMLSelectElement, label: string) => {
+    const box = el('span', { class: 'mk-select', 'data-mk-fb-select': '' });
+    box.append(select);
+    selects.set(box, createSelect(box, { label }));
+    return box;
+  };
+  /** The selects inside `container` go (before it is emptied or removed). */
+  const dropChoices = (container: Element) => {
+    for (const [box, select] of selects) {
+      if (!container.contains(box)) continue;
+      select.destroy();
+      selects.delete(box);
+    }
+  };
+  scope.add(() => {
+    for (const select of selects.values()) select.destroy();
+    selects.clear();
+  });
+
   // ── Value controls ───────────────────────────────────────────────────────
   const valueControl = (rule: FilterRule, index: 0 | 1) => {
     const field = fieldOf(rule.field);
@@ -111,6 +134,9 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     if (type === 'select') {
       control = el('select');
       control.append(el('option', { value: '' }, 'Elige…'), ...(field?.options ?? []).map((option) => el('option', { value: option.value }, option.label)));
+      control.dataset.mkFbValue = String(index);
+      control.value = current === null || current === undefined ? '' : String(current);
+      return choice(control, index === 1 ? 'Hasta' : operatorOf(field, rule.operator).arity === 2 ? 'Desde' : 'Valor');
     } else {
       control = el('input');
       control.type = type === 'number' ? 'text' : type === 'date' ? 'date' : 'text';
@@ -126,6 +152,7 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
   const fillValues = (row: HTMLElement, rule: FilterRule) => {
     const host = row.querySelector<HTMLElement>('[data-mk-fb-values]')!;
     const { arity } = operatorOf(fieldOf(rule.field), rule.operator);
+    dropChoices(host);
     host.replaceChildren();
     if (arity === 0) return;
     host.append(valueControl(rule, 0));
@@ -147,7 +174,7 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     const values = el('span', { 'data-mk-fb-values': '' });
     const remove = el('button', { type: 'button', 'data-mk-fb-remove': '', 'aria-label': 'Quitar condición' });
     remove.innerHTML = CLOSE;
-    row.append(field, operator, values, remove);
+    row.append(choice(field, 'Campo'), choice(operator, 'Operador'), values, remove);
     fillOperators(row, rule);
     fillValues(row, rule);
     return row;
@@ -195,6 +222,7 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
   };
 
   const render = () => {
+    dropChoices(tree);
     tree.replaceChildren(groupBox(model, 0));
     placeIndicators(true);
     describe();
@@ -220,7 +248,7 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     parts.push(element);
     if (isGroup(node)) placeIndicators(true);
     keep(blurIn(parts, { from: 'rise', stagger: 0.04 }));
-    element.querySelector<HTMLElement>('select, input')?.focus();
+    element.querySelector<HTMLElement>('[data-mk-select-trigger], input')?.focus();
     emit();
   };
 
@@ -236,6 +264,7 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     const box = boxOf(parent.id)!;
     const focusAfter = box.querySelector<HTMLElement>(':scope > [data-mk-fb-actions] button');
     const gone = () => {
+      dropChoices(element);
       element.remove();
       link?.remove();
     };
@@ -292,6 +321,8 @@ export function createFilterBuilder(root: HTMLElement | null, options: FilterBui
     setCombinator(group, next);
     option.parentElement!.querySelector<HTMLElement>(`[data-combinator="${next}"]`)!.focus();
   });
+  // The selects' own events stay inside: listeners on the builder hear the builder's mk:change.
+  scope.on(tree, 'mk:change', (event) => event.stopPropagation());
   scope.on(tree, 'change', (event) => {
     const target = event.target as HTMLElement;
     const row = target.closest<HTMLElement>('[data-mk-fb-rule]');

package/src/components/filter-builder/filter-builder.css

@@ -88,7 +88,13 @@ mk-filter-builder {
   min-width: 0;
 }
 
-[data-mk-fb-rule] :is(select, input) {
+/* Choices are the kit's select (select.css draws the button); inputs share its look. */
+[data-mk-fb-rule] .mk-select {
+  min-width: 8rem;
+  max-width: 100%;
+}
+
+[data-mk-fb-rule] input {
   box-sizing: border-box;
   min-width: 0;
   height: 2.5rem;
@@ -103,22 +109,11 @@ mk-filter-builder {
   transition: box-shadow 0.2s ease;
 }
 
-[data-mk-fb-rule] select {
-  max-width: 100%;
-  padding-right: 1.9rem;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-position: right 0.55rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  cursor: pointer;
-}
-
 [data-mk-fb-rule] input {
   width: 9rem;
 }
 
-[data-mk-fb-rule] :is(select, input):focus-visible {
+[data-mk-fb-rule] input:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
 }
 
@@ -217,7 +212,7 @@ mk-filter-builder {
 }
 
 @media (max-width: 480px) {
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] :is(.mk-select, input) {
     flex: 1 1 8rem;
   }
 }
@@ -225,7 +220,7 @@ mk-filter-builder {
 @media (prefers-reduced-motion: reduce) {
   [data-mk-fb-combinator] [role='radio'],
   [data-mk-fb-actions] button,
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] input {
     transition: none;
   }
 }

package/src/components/heatmap-chart/README.md

@@ -0,0 +1,48 @@
+# heatmap-chart
+
+Calendario de actividad tipo GitHub con intensidad por día, tooltips y desplazamiento horizontal.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { HeatmapChart } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add heatmap-chart --react --elements
+```
+
+## React
+
+```tsx
+<HeatmapChart end="2026-10-31" weeks={26} data={{ "2026-10-30": 4, "2026-10-31": 8 }} unit="sesiones" locale="es-MX" />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-heatmap-chart end="2026-10-31" weeks="26" data='{"2026-10-30":4,"2026-10-31":8}'></mk-heatmap-chart>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-heatmap-chart']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createHeatmapChart } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+data: {date, value}[] o mapa YYYY-MM-DD a valor. end: hoy. weeks: 53. firstDay: 1 (lunes). levels: 4. color: acento. locale, unit, legend. onSelect(date, value). Instancia: select(date | null), update(options), selected.
+
+Todos los gráficos aceptan `label`, `emptyLabel` y `formatValue`. Se actualizan con `update(options)` sin desmontarse; `select(index | null)` y `selected` controlan la selección (en heatmap se usa una fecha). `onSelect` también emite `mk:select`.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-heatmap-color, --mk-heatmap-empty; --mk-chart-surface.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

package/src/components/heatmap-chart/element.ts

@@ -0,0 +1,21 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createHeatmapChart, type HeatmapChartInstance, type HeatmapChartOptions } from './engine';
+
+/** <mk-heatmap-chart></mk-heatmap-chart> */
+export class MkHeatmapChartElement extends MkElement<HeatmapChartInstance> {
+  static options: Record<string, OptionType> = { data: 'json', end: 'string', weeks: 'number', firstDay: 'number', locale: 'string', levels: 'number', color: 'string', unit: 'string', label: 'string', legend: 'boolean', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createHeatmapChart(this, options);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update({ legend: undefined, color: undefined, ...this.options });
+  }
+
+  update(options: HeatmapChartOptions) { this.instance?.update(options); }
+  select(date: string | null) { this.instance?.select(date); }
+}
+
+export const defineHeatmapChart = () => defineElement('mk-heatmap-chart', MkHeatmapChartElement);