@yewdiel21/motion-kit 0.17.0 → 0.19.0

package/src/components/dialog/README.md

@@ -1,103 +1,104 @@
-# dialog
-
-El diálogo sobre `<dialog>` nativo (foco atrapado, Escape, capa superior). El botón que lo abre se convierte en el diálogo y al cerrar vuelve a él.
-
-- **Abrir desde el botón (morph):** la superficie viaja recortada desde el rect del botón en 0.7 s con la curva signature y toma su color en 0.3 s; el contenido crece como grupo desde la caja del botón con blur 8 → 0. El botón se oculta en 80 ms mientras está "dentro".
-- **Elementos compartidos:** `data-mk-shared="titulo"` en una pieza del botón y otra del diálogo: el texto vuela de una a otra (0.7 s al abrir, 0.5 s al cerrar).
-- **Sin botón en pantalla:** escala .92 → 1 en 0.35 s (`power2.out`).
-- **Cerrar:** el diálogo se cierra al instante (el foco vuelve y la página responde) mientras una copia inerte se pliega al botón: forma 0.5 s, contenido con blur → 32 px (`.37,.35,0,1`) y fundido (`.56,.27,0,1`), velo `power3.in`; el botón reaparece 0.3 s tras 0.2 s. Sin botón: escala .9 + blur 32.
-- **Líquido** (`variant="liquid"`): dos blobs bajo filtro goo; posición con resorte 144/14 y patada de 2400 px/s, tamaño 0.3 s `cubic(.8,.3,.5,.8)`, radio 0.7 s, contenido `scale 2 → 1` y blur 8 → 0, color 0.4 s tras 0.15 s. Cierre con resorte 130/18.
-- **Backdrop:** tinte 0.5 s con la curva signature (`linear()`).
-- **Auto-resize:** si el contenido crece o se encoge, la altura se ajusta en 0.45 s (signature).
-- **Arrastrar para cerrar:** sigue al puntero a la mitad y encoge (`1 − y/400`); pasados 100 px se cierra donde quedó, si no vuelve con `elastic.out(.5,.5)` 0.5 s. También con la rueda. Ignora controles, áreas con scroll y `[data-mk-no-drag]`.
-- **Ventana flotante** (`float="clave"`, escritorio ≥ 680 px): el asa la levanta (la página sigue usable), se mueve con resorte 1100/38 e inercia, se queda dentro de la pantalla, se redimensiona por las esquinas (mín. 320 × 240) y recuerda su sitio. Un clic en el asa la devuelve.
-- **Móvil (< 680 px):** pantalla completa, radio 0.
-
-- **Sheet** (`variant="sheet"`): la hoja sube desde abajo (`y 100% → 0`, 0.72 s `cubic-bezier(.16,1,.3,1)`) y lo marcado con `[data-mk-underlay]` se hunde a escala .98 y opacidad .4 con un resorte 300/30. Al cerrar, una copia inerte cae por debajo de la pantalla y el foco vuelve al instante. No sale del botón. Mientras está abierta, la página no hace scroll.
-
-## HTML / Astro
-
-```html
-<button class="mk-button" data-mk-open="crear">Crear proyecto</button>
-
-<mk-dialog id="crear" heading="Crear proyecto" description="Se guarda en tu espacio.">
-  <label class="mk-field"><span class="mk-field__label">Nombre</span><input /></label>
-  <div data-mk-part="footer">
-    <button class="mk-button mk-button--text" data-mk-close>Cancelar</button>
-    <button class="mk-button mk-button--primary">Crear</button>
-  </div>
-</mk-dialog>
-
-<script>
-  import { defineElements } from '@yewdiel21/motion-kit/elements';
-  defineElements(['mk-dialog']);
-</script>
-```
-
-Sin `heading`, tus hijos van dentro tal cual si ya usan partes (`data-mk-part="header|body|footer"`), o dentro de un cuerpo si no. Sobre tu propio `<dialog class="mk-dialog">`: `createDialog(dialog, opciones)`.
-
-## React
-
-```tsx
-<Dialog.Root variant="liquid" onOpenChange={setOpen}>
-  <Dialog.Trigger className="mk-button">Crear</Dialog.Trigger>
-  <Dialog.Content>
-    <Dialog.Header>
-      <div><Dialog.Title>Crear proyecto</Dialog.Title></div>
-      <Dialog.Actions><Dialog.Close /></Dialog.Actions>
-    </Dialog.Header>
-    <Dialog.Body>…</Dialog.Body>
-    <Dialog.Footer>…</Dialog.Footer>
-  </Dialog.Content>
-</Dialog.Root>
-```
-
-Las opciones van en `Dialog.Root` (`variant`, `placement`, `float`…). Controlado con `open` + `onOpenChange`, o libre con `defaultOpen`. `Dialog.Trigger` registra su botón como origen.
-
-## Opciones
-
-| Opción | Atributo | Por defecto | Qué hace |
-|---|---|---|---|
-| `variant` | `variant` | `'morph'` | `'liquid'` para la versión líquida; `'sheet'` para la hoja que sube desde abajo; `'drawer'` desliza desde su lado (`data-mk-drawer`, ver [drawer](../drawer/README.md)) |
-| `placement` | `placement` | `'center'` | `'anchor'` junto al botón, `'side'` panel lateral |
-| `anchor` | — | caja del origen | Con `placement: 'anchor'`, función que devuelve la caja (`DOMRect`) junto a la que se coloca; se lee al abrir y al redimensionar ([context-menu](../context-menu/README.md) la usa para el puntero) |
-| `backdrop` | `no-backdrop` | `true` | Velo tintado |
-| `closeOnBackdrop` | `persistent` | `true` | Clic fuera cierra |
-| `drag` | `no-drag` | `true` | Arrastrar para cerrar |
-| `float` | `float="clave"` | `false` | Ventana flotante (necesita un `[data-mk-part="handle"]`; con `heading` se crea) |
-| `autoResize` | — | `true` | Ajuste suave de altura |
-| `triggers` | (el `id`) | `true` | `[data-mk-open="<id>"]` lo abre |
-| `modal` | — | `true` | Modal o no |
-| `labels` | `close-label` | `{ close: 'Cerrar', float, dock }` | Textos accesibles |
-| `size` | `size` | `md` (400 px) | `sm` 360, `lg` 640, `xl` 960 |
-
-## Sheet
-
-```html
-<main data-mk-underlay>…la página…</main>
-<button class="mk-button" data-mk-open="proyecto">Ver proyecto</button>
-<mk-dialog id="proyecto" variant="sheet" heading="Private Space">…</mk-dialog>
-```
-
-```tsx
-<Dialog.Root variant="sheet">
-  <Dialog.Trigger>Ver proyecto</Dialog.Trigger>
-  <Dialog.Content>…</Dialog.Content>
-</Dialog.Root>
-```
-
-Ancho hasta `--mk-sheet-max-width` (720px), alto hasta `100dvh − 24px`, radio solo arriba; en el móvil ocupa todo el ancho. Se cierra con Escape, con el fondo, arrastrando hacia abajo o con `[data-mk-close]`. Con movimiento reducido aparece y desaparece sin animar y la página de detrás no cambia. Funciones sueltas: `sheetOpen`, `sheetClose`, `pushUnderlay`, `releaseUnderlay`.
-
-## Controles y eventos
-
-`open(origen?)`, `close()`, `toggle(origen?)`, `float()`, `dock()`, `isOpen`, `isFloating`, `destroy()`.
-Eventos que burbujean desde el `<dialog>`: `mk:open` (`detail.origin`), `mk:close` (cancelable; `detail.inPlace` tras un arrastre), `mk:closed`.
-Cualquier `[data-mk-part="close"]` o `[data-mk-close]` dentro lo cierra.
-
-## Variables CSS
-
-`--mk-dialog-bg` (surface-2), `--mk-dialog-radius` (40px), `--mk-dialog-width` (400px), `--mk-dialog-padding` (24px), `--mk-dialog-shadow`.
-
-## Accesibilidad
-
-`<dialog>` nativo: foco atrapado, Escape, fondo inerte. El título (`data-mk-part="title"`) nombra el diálogo y la descripción lo describe. El foco va al primer campo al abrir y vuelve al botón al cerrar. Con movimiento reducido abre y cierra sin viaje ni arrastre.
+# dialog
+
+El diálogo sobre `<dialog>` nativo (foco atrapado, Escape, capa superior). El botón que lo abre se convierte en el diálogo y al cerrar vuelve a él.
+
+- **Abrir desde el botón (morph):** la superficie viaja recortada desde el rect del botón en 0.7 s con la curva signature y toma su color en 0.3 s; el contenido crece como grupo desde la caja del botón con blur 8 → 0. El botón se oculta en 80 ms mientras está "dentro".
+- **Elementos compartidos:** `data-mk-shared="titulo"` en una pieza del botón y otra del diálogo: el texto vuela de una a otra (0.7 s al abrir, 0.5 s al cerrar).
+- **Sin botón en pantalla:** escala .92 → 1 en 0.35 s (`power2.out`).
+- **Cerrar:** el diálogo se cierra al instante (el foco vuelve y la página responde) mientras una copia inerte se pliega al botón: forma 0.5 s, contenido con blur → 32 px (`.37,.35,0,1`) y fundido (`.56,.27,0,1`), velo `power3.in`; el botón reaparece 0.3 s tras 0.2 s. Sin botón: escala .9 + blur 32.
+- **Líquido** (`variant="liquid"`): dos blobs bajo filtro goo; posición con resorte 144/14 y patada de 2400 px/s, tamaño 0.3 s `cubic(.8,.3,.5,.8)`, radio 0.7 s, contenido `scale 2 → 1` y blur 8 → 0, color 0.4 s tras 0.15 s. Cierre con resorte 130/18.
+- **Backdrop:** tinte 0.5 s con la curva signature (`linear()`).
+- **Auto-resize:** si el contenido crece o se encoge, la altura se ajusta en 0.45 s (signature).
+- **Arrastrar para cerrar:** sigue al puntero a la mitad y encoge (`1 − y/400`); pasados 100 px se cierra donde quedó, si no vuelve con `elastic.out(.5,.5)` 0.5 s. También con la rueda. Ignora controles, áreas con scroll y `[data-mk-no-drag]`.
+- **Ventana flotante** (`float="clave"`, escritorio ≥ 680 px): el asa la levanta (la página sigue usable), se mueve con resorte 1100/38 e inercia, se queda dentro de la pantalla, se redimensiona por las esquinas (mín. 320 × 240) y recuerda su sitio. Un clic en el asa la devuelve.
+- **Móvil (< 680 px):** pantalla completa, radio 0.
+- **Cuerpo largo:** `[data-mk-part="body"]` se desplaza con la barra de [`scroll-area`](../scroll-area/README.md) en lugar de la del sistema. Ocupa solo la caja del cuerpo, entre cabecera y pie, deja libres las esquinas redondeadas y funde los bordes con más contenido.
+
+- **Sheet** (`variant="sheet"`): la hoja sube desde abajo (`y 100% → 0`, 0.72 s `cubic-bezier(.16,1,.3,1)`) y lo marcado con `[data-mk-underlay]` se hunde a escala .98 y opacidad .4 con un resorte 300/30. Al cerrar, una copia inerte cae por debajo de la pantalla y el foco vuelve al instante. No sale del botón. Mientras está abierta, la página no hace scroll.
+
+## HTML / Astro
+
+```html
+<button class="mk-button" data-mk-open="crear">Crear proyecto</button>
+
+<mk-dialog id="crear" heading="Crear proyecto" description="Se guarda en tu espacio.">
+  <label class="mk-field"><span class="mk-field__label">Nombre</span><input /></label>
+  <div data-mk-part="footer">
+    <button class="mk-button mk-button--text" data-mk-close>Cancelar</button>
+    <button class="mk-button mk-button--primary">Crear</button>
+  </div>
+</mk-dialog>
+
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-dialog']);
+</script>
+```
+
+Sin `heading`, tus hijos van dentro tal cual si ya usan partes (`data-mk-part="header|body|footer"`), o dentro de un cuerpo si no. Sobre tu propio `<dialog class="mk-dialog">`: `createDialog(dialog, opciones)`.
+
+## React
+
+```tsx
+<Dialog.Root variant="liquid" onOpenChange={setOpen}>
+  <Dialog.Trigger className="mk-button">Crear</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <div><Dialog.Title>Crear proyecto</Dialog.Title></div>
+      <Dialog.Actions><Dialog.Close /></Dialog.Actions>
+    </Dialog.Header>
+    <Dialog.Body>…</Dialog.Body>
+    <Dialog.Footer>…</Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+Las opciones van en `Dialog.Root` (`variant`, `placement`, `float`…). Controlado con `open` + `onOpenChange`, o libre con `defaultOpen`. `Dialog.Trigger` registra su botón como origen.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `variant` | `variant` | `'morph'` | `'liquid'` para la versión líquida; `'sheet'` para la hoja que sube desde abajo; `'drawer'` desliza desde su lado (`data-mk-drawer`, ver [drawer](../drawer/README.md)) |
+| `placement` | `placement` | `'center'` | `'anchor'` junto al botón, `'side'` panel lateral |
+| `anchor` | — | caja del origen | Con `placement: 'anchor'`, función que devuelve la caja (`DOMRect`) junto a la que se coloca; se lee al abrir y al redimensionar ([context-menu](../context-menu/README.md) la usa para el puntero) |
+| `backdrop` | `no-backdrop` | `true` | Velo tintado |
+| `closeOnBackdrop` | `persistent` | `true` | Clic fuera cierra |
+| `drag` | `no-drag` | `true` | Arrastrar para cerrar |
+| `float` | `float="clave"` | `false` | Ventana flotante (necesita un `[data-mk-part="handle"]`; con `heading` se crea) |
+| `autoResize` | — | `true` | Ajuste suave de altura |
+| `triggers` | (el `id`) | `true` | `[data-mk-open="<id>"]` lo abre |
+| `modal` | — | `true` | Modal o no |
+| `labels` | `close-label` | `{ close: 'Cerrar', float, dock }` | Textos accesibles |
+| `size` | `size` | `md` (400 px) | `sm` 360, `lg` 640, `xl` 960 |
+
+## Sheet
+
+```html
+<main data-mk-underlay>…la página…</main>
+<button class="mk-button" data-mk-open="proyecto">Ver proyecto</button>
+<mk-dialog id="proyecto" variant="sheet" heading="Private Space">…</mk-dialog>
+```
+
+```tsx
+<Dialog.Root variant="sheet">
+  <Dialog.Trigger>Ver proyecto</Dialog.Trigger>
+  <Dialog.Content>…</Dialog.Content>
+</Dialog.Root>
+```
+
+Ancho hasta `--mk-sheet-max-width` (720px), alto hasta `100dvh − 24px`, radio solo arriba; en el móvil ocupa todo el ancho. Se cierra con Escape, con el fondo, arrastrando hacia abajo o con `[data-mk-close]`. Con movimiento reducido aparece y desaparece sin animar y la página de detrás no cambia. Funciones sueltas: `sheetOpen`, `sheetClose`, `pushUnderlay`, `releaseUnderlay`.
+
+## Controles y eventos
+
+`open(origen?)`, `close()`, `toggle(origen?)`, `float()`, `dock()`, `isOpen`, `isFloating`, `destroy()`.
+Eventos que burbujean desde el `<dialog>`: `mk:open` (`detail.origin`), `mk:close` (cancelable; `detail.inPlace` tras un arrastre), `mk:closed`.
+Cualquier `[data-mk-part="close"]` o `[data-mk-close]` dentro lo cierra.
+
+## Variables CSS
+
+`--mk-dialog-bg` (surface-2), `--mk-dialog-radius` (40px), `--mk-dialog-width` (400px), `--mk-dialog-padding` (24px), `--mk-dialog-shadow`.
+
+## Accesibilidad
+
+`<dialog>` nativo: foco atrapado, Escape, fondo inerte. El título (`data-mk-part="title"`) nombra el diálogo y la descripción lo describe. El foco va al primer campo al abrir y vuelve al botón al cerrar. Con movimiento reducido abre y cierra sin viaje ni arrastre.

package/src/components/dialog/dialog.css

@@ -5,6 +5,8 @@
   --mk-dialog-width: 400px;
   --mk-dialog-padding: 24px;
   --mk-dialog-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.35);
+  /* The body's scroll-area bar keeps its ends clear of the rounded corners. */
+  --mk-scroll-inset: max(6px, calc(var(--mk-dialog-radius) * 0.6));
   width: min(var(--mk-dialog-width), calc(100vw - 32px));
   max-width: none;
   max-height: min(88dvh, calc(100dvh - 32px));