@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/breadcrumb/element.ts

@@ -0,0 +1,27 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createBreadcrumb, type BreadcrumbInstance, type BreadcrumbItem } from './engine';
+
+/**
+ * <mk-breadcrumb class="mk-breadcrumb" items='[{"label":"Inicio","href":"/"},{"label":"Proyectos","href":"/p"},{"label":"Melon"}]'>
+ * </mk-breadcrumb> — or authored <a>/<span> children. Emits mk:navigate ({item, index}, cancelable).
+ */
+export class MkBreadcrumbElement extends MkElement<BreadcrumbInstance> {
+  static options: Record<string, OptionType> = { items: 'json', label: 'string', maxItems: 'number' };
+
+  protected create(options: Record<string, unknown>) {
+    return createBreadcrumb(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'items') {
+      try {
+        this.instance.setItems(JSON.parse(next ?? '[]') as BreadcrumbItem[]);
+      } catch {
+        // Malformed JSON: keep the current path.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineBreadcrumb = () => defineElement('mk-breadcrumb', MkBreadcrumbElement);

package/src/components/breadcrumb/engine.ts

@@ -0,0 +1,249 @@
+import { gsap, EASE, Flip, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Breadcrumb: the path to the current page as an ordered list in a
+ * <nav aria-label>; the last item is the page itself (aria-current="page").
+ * When the items do not fit (or pass maxItems) the middle ones fold into a
+ * "…" button; pressing it shows them in place, flowing in from the left
+ * (blur 16 → 0, 40 ms apart) while the rest glides to make room. setItems()
+ * keeps the shared start of the path: the items that stay glide to their new
+ * place (layout reflow), new ones grow in, and the old current page turns into
+ * a link. Links underline from the left on hover; activating one emits a
+ * cancelable mk:navigate (onNavigate) before the browser follows it.
+ */
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbOptions {
+  /** The path; without it, the authored <ol> or <a>/<span> children are read. */
+  items?: BreadcrumbItem[];
+  /** Accessible name of the navigation (default 'Ruta de navegación'). */
+  label?: string;
+  /** 'auto' (default) folds the middle when it does not fit; a number keeps at most that many items. */
+  maxItems?: number | 'auto';
+  /** Called before following a link; event.preventDefault() keeps the browser where it is (SPA routing). */
+  onNavigate?: (item: BreadcrumbItem, index: number, event: Event) => void;
+}
+
+export interface BreadcrumbInstance extends Instance {
+  setItems(items: BreadcrumbItem[]): void;
+  readonly items: BreadcrumbItem[];
+}
+
+const readAuthored = (root: HTMLElement): BreadcrumbItem[] =>
+  [...root.querySelectorAll<HTMLElement>('li, :scope > a, :scope > span')]
+    .map((element) => {
+      const link = element.matches('a') ? (element as HTMLAnchorElement) : element.querySelector<HTMLAnchorElement>('a');
+      return { label: (link ?? element).textContent?.trim() ?? '', href: link?.getAttribute('href') ?? undefined };
+    })
+    .filter((item) => item.label);
+
+/** A crumb is the same one at the same place with the same label (a current page that turns into a link stays). */
+const key = (item: BreadcrumbItem, index: number) => `${index}:${item.label}`;
+
+export function createBreadcrumb(root: HTMLElement | null, options: BreadcrumbOptions = {}): BreadcrumbInstance {
+  if (!root) return inert({ setItems() {}, items: [] });
+  registerMotion();
+  const scope = createScope();
+  let items = (options.items ?? readAuthored(root)).map((item) => ({ ...item }));
+  const maxItems = typeof options.maxItems === 'number' && options.maxItems >= 2 ? Math.floor(options.maxItems) : 'auto';
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    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);
+  };
+
+  // Authored markup stays in the DOM but out of sight; the engine draws its own list.
+  const authored = [...root.childNodes];
+  const holder = document.createElement('div');
+  holder.hidden = true;
+  holder.append(...authored);
+  const nav = document.createElement('nav');
+  nav.dataset.mkBreadcrumbNav = '';
+  nav.setAttribute('aria-label', options.label ?? 'Ruta de navegación');
+  const list = document.createElement('ol');
+  list.dataset.mkBreadcrumbList = '';
+  nav.append(list);
+  root.append(nav);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    nav.remove();
+    root.append(...holder.childNodes);
+  });
+  scope.attr(root, 'data-mk-ready', '');
+
+  /**
+   * The items that stay glide to their new place (layout reflow spring); the new ones come in from the side of
+   * travel out of a blur (from the left when the folded middle opens, from the right when the path grows).
+   */
+  const reflow = (change: () => void, from: 'left' | 'right') => {
+    const crumbs = () => [...list.querySelectorAll<HTMLElement>('[data-mk-crumb]')];
+    if (reduced()) return change();
+    const state = Flip.getState(crumbs());
+    change();
+    keep(
+      Flip.from(state, {
+        targets: crumbs(),
+        duration: TIMING.layoutTravel,
+        ease: EASE.layoutReflow,
+        onEnter: (entering) =>
+          gsap.fromTo(
+            entering,
+            { opacity: 0, x: from === 'left' ? -12 : 12, filter: 'blur(8px)' },
+            { opacity: 1, x: 0, filter: 'blur(0px)', duration: 0.35, stagger: 0.04, ease: 'power2.out', clearProps: 'opacity,transform,filter' },
+          ),
+      }),
+    );
+  };
+
+  /** Fold the middle when collapsed: which indexes are hidden. */
+  let expanded = false;
+  let hidden: number[] = [];
+
+  const crumb = (item: BreadcrumbItem, index: number) => {
+    const li = document.createElement('li');
+    li.dataset.mkCrumb = '';
+    li.dataset.flipId = key(item, index);
+    const last = index === items.length - 1;
+    if (last) {
+      const span = document.createElement('span');
+      span.dataset.mkCrumbCurrent = '';
+      span.setAttribute('aria-current', 'page');
+      span.textContent = item.label;
+      li.append(span);
+    } else if (item.href !== undefined) {
+      const link = document.createElement('a');
+      link.dataset.mkCrumbLink = '';
+      link.href = item.href;
+      link.dataset.mkIndex = String(index);
+      link.textContent = item.label;
+      li.append(link);
+    } else {
+      const span = document.createElement('span');
+      span.dataset.mkCrumbText = '';
+      span.textContent = item.label;
+      li.append(span);
+    }
+    return li;
+  };
+
+  const more = () => {
+    const li = document.createElement('li');
+    li.dataset.mkCrumb = '';
+    li.dataset.flipId = 'more';
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.mkCrumbMore = '';
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-label', hidden.length === 1 ? 'Mostrar 1 nivel oculto' : `Mostrar ${hidden.length} niveles ocultos`);
+    button.textContent = '…';
+    li.append(button);
+    return li;
+  };
+
+  const render = () => {
+    const nodes: HTMLElement[] = [];
+    items.forEach((item, index) => {
+      if (hidden.includes(index)) {
+        if (index === hidden[0]) nodes.push(more());
+        return;
+      }
+      nodes.push(crumb(item, index));
+    });
+    list.replaceChildren(...nodes);
+    nav.toggleAttribute('data-mk-expanded', expanded);
+  };
+
+  /** The middle indexes to fold, keeping the first item and the last `keepEnd`. */
+  const fold = (keepEnd: number) => {
+    const end = Math.max(1, items.length - keepEnd);
+    return Array.from({ length: Math.max(0, end - 1) }, (_, i) => i + 1);
+  };
+
+  const fits = () => list.scrollWidth <= list.clientWidth + 1;
+
+  const layout = () => {
+    if (expanded || items.length <= 2) {
+      hidden = [];
+      render();
+      return;
+    }
+    if (maxItems !== 'auto') {
+      hidden = items.length > maxItems ? fold(maxItems - 1) : [];
+      render();
+      return;
+    }
+    // Fold from the middle until the row fits with the current page whole (jsdom has no layout: it always fits);
+    // only when even the shortest fold is too long does the current page ellipsize.
+    nav.setAttribute('data-mk-measuring', '');
+    hidden = [];
+    render();
+    for (let keepEnd = items.length - 2; keepEnd >= 1 && !fits(); keepEnd--) {
+      hidden = fold(keepEnd);
+      render();
+    }
+    nav.removeAttribute('data-mk-measuring');
+  };
+
+  scope.on(list, 'click', (event) => {
+    const target = event.target as Element | null;
+    if (target?.closest('[data-mk-crumb-more]')) {
+      const shown = hidden.map((index) => key(items[index]!, index));
+      reflow(() => {
+        expanded = true;
+        hidden = [];
+        render();
+      }, 'left');
+      // The button is gone: the focus moves to the first level it revealed.
+      const first = [...list.querySelectorAll<HTMLElement>('[data-mk-crumb]')].find((li) => shown.includes(li.dataset.flipId ?? ''));
+      first?.querySelector<HTMLElement>('a')?.focus();
+      return;
+    }
+    const link = target?.closest<HTMLAnchorElement>('a[data-mk-crumb-link]');
+    if (!link) return;
+    const index = Number(link.dataset.mkIndex);
+    const item = items[index]!;
+    options.onNavigate?.(item, index, event);
+    const navigate = new CustomEvent('mk:navigate', { bubbles: true, cancelable: true, detail: { item, index } });
+    if (!root.dispatchEvent(navigate)) event.preventDefault();
+  });
+
+  if (typeof ResizeObserver === 'function') {
+    let width = 0;
+    scope.observe(
+      new ResizeObserver(() => {
+        const next = nav.clientWidth;
+        if (Math.abs(next - width) < 1) return;
+        width = next;
+        if (!expanded) layout();
+      }),
+    ).observe(nav);
+  }
+
+  layout();
+
+  return {
+    setItems(next) {
+      if (scope.disposed) return;
+      reflow(() => {
+        items = next.map((item) => ({ ...item }));
+        expanded = false;
+        layout();
+      }, 'right');
+    },
+    get items() {
+      return items.map((item) => ({ ...item }));
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/breadcrumb/react.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createBreadcrumb, type BreadcrumbInstance, type BreadcrumbItem, type BreadcrumbOptions } from './engine';
+
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, Omit<BreadcrumbOptions, 'items'> {
+  items: BreadcrumbItem[];
+}
+
+/** <Breadcrumb items={path} onNavigate={(item, i, event) => { event.preventDefault(); go(item.href) }} />. */
+export function Breadcrumb({ items, label, maxItems, onNavigate, className, ...props }: BreadcrumbProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<BreadcrumbInstance | null>(null);
+  const navigate = useLatest(onNavigate);
+  const key = JSON.stringify(items);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBreadcrumb(ref.current, { items, label, maxItems, onNavigate: (item, index, event) => navigate.current?.(item, index, event) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [label, maxItems]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && JSON.stringify(instance.current.items) !== key) instance.current.setItems(items);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+  return <div {...props} ref={ref} className={['mk-breadcrumb', className].filter(Boolean).join(' ')} />;
+}

package/src/components/calendar/README.md

@@ -0,0 +1,82 @@
+# calendar
+
+El calendario de Melon Mind. Tiene vista de mes y de semana, día de hoy marcado y eventos como chips con estado (pendiente, completado o cancelado), hora y color propio.
+
+- **Al cargar:** los días entran desde arriba con blur (y −20 px, blur 16 → 0, 0.5 s), 5 ms uno tras otro, y después los eventos, 20 ms uno tras otro. Es el `flowChilds` del `CalendarComponent` original.
+- **Cambiar de mes o semana:** la rejilla vieja sale 30 px hacia un lado (0.12 s) y, cuando ya casi no se ve, la nueva entra 30 px desde el otro (0.25 s `ease-out`), como los horarios de su selector de citas. Van en secuencia, sin fundido cruzado, para que no se mezclen dos meses llenos de eventos. Luego vuelven a entrar los eventos.
+- **Hover:** el fondo del día cambia en 0.3 s y el número tiene resorte de radio y escala (`cubic-bezier(.38,.49,0,2)`).
+
+Origen: patrón observado en la app de Melon Mind.
+
+## HTML / Astro
+
+```html
+<mk-calendar class="mk-calendar" locale="es" first-day="0"
+  events='[{"id":1,"title":"Ana","start":"2026-10-23T10:00","status":"pending"}]'>
+  <div class="mk-calendar__header">
+    <h3 class="mk-calendar__title" data-mk-calendar-title>Calendario</h3>
+    <div class="mk-calendar__views" role="group" aria-label="Vista">
+      <button type="button" data-mk-calendar-view="month">Mes</button>
+      <button type="button" data-mk-calendar-view="week">Semana</button>
+    </div>
+    <button type="button" class="mk-calendar__nav" data-mk-calendar-prev aria-label="Anterior">←</button>
+    <button type="button" class="mk-calendar__nav" data-mk-calendar-today>Hoy</button>
+    <button type="button" class="mk-calendar__nav" data-mk-calendar-next aria-label="Siguiente">→</button>
+  </div>
+  <div data-mk-calendar-grid></div>
+</mk-calendar>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-calendar']);
+</script>
+```
+
+Sólo `[data-mk-calendar-grid]` es obligatorio. Las demás piezas del header son opcionales. Si cambias el atributo `events`, los eventos se actualizan sin perder el mes ni el foco. Sin custom element: `createCalendar(root, opciones)`.
+
+## React
+
+```tsx
+<Calendar
+  events={citas}
+  onSelect={(day) => abrirDia(day)}
+  onEventClick={(event) => abrirCita(event.id)}
+/>
+```
+
+`events` y `selected` se actualizan en el sitio. `date` y `view` son iniciales: el usuario navega libremente.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `date` | `date` | hoy | Mes o semana inicial (`Date` o `"2026-10-23"`) |
+| `view` | `view` | `'month'` | `'month'` o `'week'` |
+| `firstDay` | `first-day` | `0` | Primer día de la semana (0 = domingo) |
+| `locale` | `locale` | `'es'` | Nombres de mes y día, formato de hora |
+| `events` | `events` (JSON) | `[]` | `{ id, title, start, end?, allDay?, status?, color? }` |
+| `maxEvents` | `max-events` | `3` | Chips por día en la vista de mes antes de «+N más» |
+| `selected` | `selected` | — | Día seleccionado |
+| `today` | `today` | — | Fija «hoy» (demos, pruebas) |
+| `labels` | — | español | `more(n)`, `events(n)`, `status` |
+| `onSelect(date)`, `onEventClick(event)`, `onNavigate({start, end, view})` | — | — | Callbacks |
+
+API: `next()`, `prev()`, `goToday()`, `setDate(d)`, `setView(v)`, `setEvents(list)`, `select(d | null, notify)`, `date`, `view`, `selected`, `range`, `destroy()`. Eventos DOM: `mk:select` `{date, key}`, `mk:event` `{event}` y `mk:navigate` `{start, end, view}`.
+
+Un evento con `end` en otro día aparece en cada día que cubre, hasta dos meses.
+
+## Variables CSS
+
+`--mk-calendar-gap`, `--mk-calendar-radius`, `--mk-calendar-day-height` y `--mk-calendar-event-color` (por evento, con `color`).
+
+## Accesibilidad
+
+Rejilla ARIA (`grid` / `row` / `columnheader` / `gridcell`) con un solo botón de día en el orden de tabulación:
+
+| Tecla | Acción |
+|---|---|
+| Flechas | Día anterior/siguiente, misma semana anterior/siguiente |
+| Inicio / Fin | Principio/fin de semana |
+| RePág / AvPág | Mes anterior/siguiente (con Mayúsculas, año) |
+| Enter / Espacio | Seleccionar el día |
+
+Cada día anuncia la fecha completa y cuántos eventos tiene. Hoy lleva `aria-current="date"`. Los chips son botones con título, hora y estado. En móvil (< 680 px) los chips del mes se reducen a puntos de color. Con movimiento reducido no hay entradas, deslizamiento ni transiciones.

package/src/components/calendar/calendar.css

@@ -0,0 +1,158 @@
+/* calendar — Melon Mind's month/week grid on the --mk-* tokens; parts are .mk-calendar__*. */
+.mk-calendar,
+mk-calendar {
+  --mk-calendar-gap: 6px;
+  --mk-calendar-radius: var(--mk-radius-lg);
+  --mk-calendar-day-height: 112px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-3);
+  color: var(--mk-text);
+}
+.mk-calendar__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mk-space-2);
+}
+.mk-calendar__title { margin: 0 auto 0 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; letter-spacing: -0.01em; }
+.mk-calendar__views { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--mk-radius-full); background: var(--mk-surface-3); }
+.mk-calendar__views button,
+.mk-calendar__nav {
+  display: inline-grid;
+  place-items: center;
+  min-width: 44px;
+  height: 44px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, transform 0.3s var(--mk-ease-nav-move);
+}
+.mk-calendar__views button[aria-pressed='true'] { background: var(--mk-surface-5); color: var(--mk-text); }
+.mk-calendar__nav { background: var(--mk-surface-3); color: var(--mk-text); }
+.mk-calendar__nav:active { transform: scale(0.92); }
+:is(.mk-calendar__views button, .mk-calendar__nav):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
+
+[data-mk-calendar-grid] { position: relative; display: flex; flex-direction: column; gap: var(--mk-calendar-gap); }
+.mk-calendar__head,
+.mk-calendar__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--mk-calendar-gap); }
+.mk-calendar__body { display: flex; flex-direction: column; gap: var(--mk-calendar-gap); }
+.mk-calendar__body--leaving { position: absolute; left: 0; right: 0; pointer-events: none; }
+.mk-calendar__weekday {
+  padding: 8px 4px;
+  border-radius: var(--mk-radius-md);
+  background: var(--mk-surface-2);
+  text-align: center;
+  font-size: 0.95rem;
+}
+.mk-calendar__weekday-narrow { display: none; }
+
+.mk-calendar__day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  min-height: var(--mk-calendar-day-height);
+  padding: 6px;
+  border-radius: var(--mk-calendar-radius);
+  background: var(--mk-surface-3);
+  transition: background 0.3s, box-shadow 0.3s;
+  container-type: inline-size;
+}
+.mk-calendar__body[data-view='week'] .mk-calendar__day { min-height: calc(var(--mk-calendar-day-height) * 3); }
+.mk-calendar__day[data-outside] { background: var(--mk-surface-1); color: var(--mk-muted); }
+.mk-calendar__day:hover { background: var(--mk-surface-4); }
+.mk-calendar__day[aria-selected='true'] { box-shadow: inset 0 0 0 2px var(--mk-accent); }
+.mk-calendar__number {
+  align-self: flex-end;
+  min-width: 2.2rem;
+  height: 2.2rem;
+  padding: 0 0.4rem;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 1.15rem;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, border-radius 0.3s var(--mk-ease-nav-radius), transform 0.3s var(--mk-ease-nav-radius);
+}
+.mk-calendar__number:hover { background: var(--mk-surface-5); }
+.mk-calendar__number:active { transform: scale(0.9); }
+.mk-calendar__number:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
+.mk-calendar__day[data-today] .mk-calendar__number { background: var(--mk-accent); color: var(--mk-on-accent); }
+
+.mk-calendar__events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.mk-calendar__event,
+.mk-calendar__more {
+  --mk-calendar-event-color: var(--mk-accent);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.85rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.3s var(--mk-ease-nav-move);
+}
+.mk-calendar__event[data-state='pending'] {
+  background: color-mix(in srgb, var(--mk-calendar-event-color) 30%, var(--mk-surface-3));
+}
+.mk-calendar__event:hover,
+.mk-calendar__more:hover { transform: translateY(-1px); background: var(--mk-surface-5); }
+.mk-calendar__event:focus-visible,
+.mk-calendar__more:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 1px; }
+.mk-calendar__status {
+  flex: none;
+  width: 0.8rem;
+  height: 0.8rem;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+}
+.mk-calendar__event[data-state='done'] .mk-calendar__status { background: currentColor; box-shadow: inset 0 0 0 2px var(--mk-surface-4); }
+.mk-calendar__event[data-state='cancelled'] .mk-calendar__event-title { text-decoration: line-through; opacity: 0.6; }
+.mk-calendar__event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mk-calendar__event-time { flex: none; font-variant-numeric: tabular-nums; opacity: 0.85; }
+.mk-calendar__more { justify-content: center; background: transparent; color: var(--mk-muted); }
+
+/* Narrow day cells: the month keeps the title (the time stays in the label); the week stacks the time under it. */
+@container (max-width: 150px) {
+  .mk-calendar__body[data-view='month'] .mk-calendar__event-time { display: none; }
+  .mk-calendar__body[data-view='week'] .mk-calendar__event { flex-wrap: wrap; column-gap: 5px; row-gap: 1px; }
+  .mk-calendar__body[data-view='week'] .mk-calendar__event-title { flex: 1 1 0; }
+  .mk-calendar__body[data-view='week'] .mk-calendar__event-time { flex-basis: 100%; padding-left: calc(0.8rem + 5px); font-size: 0.72rem; }
+}
+@media (max-width: 680px) {
+  .mk-calendar,
+  mk-calendar { --mk-calendar-day-height: 64px; --mk-calendar-gap: 4px; --mk-calendar-radius: var(--mk-radius-sm); }
+  .mk-calendar__weekday-long { display: none; }
+  .mk-calendar__weekday-narrow { display: inline; }
+  .mk-calendar__number { align-self: center; font-size: 0.95rem; }
+  .mk-calendar__body[data-view='month'] .mk-calendar__events { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
+  .mk-calendar__body[data-view='month'] :is(.mk-calendar__event, .mk-calendar__more) {
+    width: 7px;
+    height: 7px;
+    padding: 0;
+    border-radius: 50%;
+    background: var(--mk-calendar-event-color);
+    font-size: 0;
+  }
+  .mk-calendar__body[data-view='month'] .mk-calendar__status { display: none; }
+  .mk-calendar__body[data-view='week'] .mk-calendar__event-time { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-calendar *,
+  mk-calendar * { transition: none !important; }
+}

package/src/components/calendar/element.ts

@@ -0,0 +1,27 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createCalendar, type CalendarEvent, type CalendarInstance } from './engine';
+
+/** Light DOM: supply the header and the [data-mk-calendar-grid] shown in the README. */
+export class MkCalendarElement extends MkElement<CalendarInstance> {
+  static options: Record<string, OptionType> = {
+    date: 'string', view: 'string', firstDay: 'number', locale: 'string', maxEvents: 'number', events: 'json', selected: 'string', today: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createCalendar(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    if (name === 'events') {
+      this.instance.setEvents((this.options.events as CalendarEvent[] | undefined) ?? []);
+      return;
+    }
+    // Keep where the visitor is unless the changed attribute says otherwise.
+    const { date, view, selected } = this.instance;
+    this.instance.destroy();
+    this.instance = this.create({ date, view, selected, ...this.options });
+  }
+}
+
+export const defineCalendar = () => defineElement('mk-calendar', MkCalendarElement);