@yewdiel21/motion-kit 0.18.0 → 0.19.0

package/src/components/code-block/README.md

@@ -1,6 +1,6 @@
 # code-block
 
-Bloque de código con título y lenguaje opcionales, números de línea y botón copiar con confirmación. El código siempre se trata como texto: una cadena que parece HTML se muestra como código, nunca se interpreta.
+Bloque de código con título y lenguaje opcionales, números de línea y botón copiar con confirmación. El código siempre se trata como texto: una cadena que parece HTML se muestra como código, nunca se interpreta. Las líneas largas se desplazan con la barra de [`scroll-area`](../scroll-area/README.md), clara sobre el editor; al arrastrarla toma el color de las palabras clave.
 
 ```html
 <mk-code-block class="mk-code-block" title="Instalar" language="bash">

package/src/components/code-block/code-block.css

@@ -20,6 +20,11 @@ mk-code-block {
   --mk-code-property: #8fd6ff;
   --mk-code-punctuation: #9aa0aa;
   --mk-code-operator: #c9ced6;
+  /* The scroll-area bar, light on the editor in both modes; dragged, it takes the keyword colour like the focus ring. */
+  --mk-scroll-thumb: rgb(255 255 255 / 0.2);
+  --mk-scroll-thumb-hover: rgb(255 255 255 / 0.36);
+  --mk-scroll-thumb-active: var(--mk-code-keyword);
+  --mk-scroll-rail: rgb(255 255 255 / 0.05);
   position: relative;
   display: block;
   overflow: hidden;

package/src/components/code-block/engine.ts

@@ -3,6 +3,7 @@ import { reduced } from '../../core/reduced';
 import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 import { press } from '../../motion/micro';
+import { createScrollArea } from '../scroll-area/engine';
 import { languageFamily, renderCode } from './highlight';
 
 /*
@@ -11,6 +12,7 @@ import { languageFamily, renderCode } from './highlight';
  * show as code. Copy writes the exact string with the Clipboard API and reports
  * success or failure in a polite status; on failure the code is selected so it
  * can be copied by hand. A copy that finishes after destroy changes nothing.
+ * Long lines scroll under the kit's scroll-area bar, light on the dark editor.
  * Parts (made when absent): pre > code, [data-mk-code-copy], [data-mk-code-status].
  */
 
@@ -136,6 +138,9 @@ export function createCodeBlock(root: HTMLElement | null, options: CodeBlockOpti
   if (options.language) scope.attr(root, 'data-mk-language', options.language);
   if (options.lineNumbers) scope.attr(root, 'data-mk-line-numbers', '');
   scope.attr(root, 'data-mk-ready', '');
+  // The <pre> is already the keyboard's way in; the bar follows it under the header.
+  const area = createScrollArea(root, { viewport: pre, focusable: false, decorative: true });
+  scope.add(() => area.destroy());
 
   // A framework that already rendered the lines owns them; the engine only copies.
   const prerendered = Boolean(code.querySelector('[data-mk-code-line]'));

package/src/components/command-search/README.md

@@ -1,6 +1,6 @@
 # command-search
 
-Paleta de comandos en un `<dialog>` modal sobre vidrio oscuro. Se abre con ⌘K / Ctrl+K o con un botón `[data-mk-command-open]` y crece desde el botón que la abre (o desde el disparador visible con ⌘K/Ctrl+K) y se pliega de vuelta en él al cerrar: el color del botón se funde en el panel y la forma viaja 0,7 s; `open(origen)` elige otro control y `open(null)` la abre en su sitio. Al escribir filtra por coincidencia aproximada (letras en orden, sin tildes ni mayúsculas) y marca las letras con `<mark>` creado como texto. Los resultados se agrupan; una píldora se desliza bajo el activo con la curva swing.
+Paleta de comandos en un `<dialog>` modal sobre vidrio oscuro. Se abre con ⌘K / Ctrl+K o con un botón `[data-mk-command-open]` y crece desde el botón que la abre (o desde el disparador visible con ⌘K/Ctrl+K) y se pliega de vuelta en él al cerrar: el color del botón se funde en el panel y la forma viaja 0,7 s; `open(origen)` elige otro control y `open(null)` la abre en su sitio. Al escribir filtra por coincidencia aproximada (letras en orden, sin tildes ni mayúsculas) y marca las letras con `<mark>` creado como texto. Los resultados se agrupan; una píldora se desliza bajo el activo con la curva swing. Los resultados largos se desplazan con la barra de [`scroll-area`](../scroll-area/README.md), clara sobre el vidrio oscuro; el foco sigue en el campo.
 
 ```html
 <mk-command-search class="mk-command-search" items='[{"id":"charts","label":"Charts","group":"Páginas","href":"/chart"},{"id":"chart","label":"Chart","group":"Componentes","href":"/chart"}]'>

package/src/components/command-search/command-search.css

@@ -86,8 +86,18 @@ mk-command-search {
   overflow-y: auto;
   padding: 0 0.6rem 0.6rem;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+}
+
+/* The scroll-area bar, light on the dark glass in both modes; long results leave it a lane. */
+[data-mk-command] [data-mk-command-panel] {
+  --mk-scroll-thumb: rgb(255 255 255 / 0.2);
+  --mk-scroll-thumb-hover: rgb(255 255 255 / 0.36);
+  --mk-scroll-thumb-active: rgb(255 255 255 / 0.62);
+  --mk-scroll-rail: rgb(255 255 255 / 0.05);
+}
+
+[data-mk-command] [data-mk-command-panel][data-mk-overflow-y] [data-mk-command-scroll] {
+  padding-right: 14px;
 }
 
 [data-mk-command] [data-mk-command-pill] {

package/src/components/command-search/engine.ts

@@ -5,6 +5,7 @@ import { inert, type Instance } from '../../core/types';
 import { blurIn } from '../../motion/micro';
 import { morphClose, morphOpen, releaseShared, showOrigin } from '../../motion/morph';
 import { fadeBackdrop, openModal } from '../../motion/surface';
+import { createScrollArea } from '../scroll-area/engine';
 import { matchScore } from './match';
 
 /*
@@ -17,6 +18,7 @@ import { matchScore } from './match';
  * under the active result on the swing curve; arrows, Home and End move it,
  * Enter picks it (onSelect, mk:select; an href navigates), Escape closes and
  * focus goes back. Combobox + listbox semantics with aria-activedescendant.
+ * Long results scroll under the kit's scroll-area bar, kept light on the glass.
  */
 
 export interface CommandItem {
@@ -119,6 +121,9 @@ export function createCommandSearch(root: HTMLElement | null, options: CommandSe
   root.append(dialog);
   scope.add(() => dialog.remove());
   scope.attr(root, 'data-mk-ready', '');
+  // The bar runs between the field and the footer; the input keeps the focus, so it is not a tab stop.
+  const area = createScrollArea(panel, { viewport: scroller, axis: 'y', focusable: false, decorative: true });
+  scope.add(() => area.destroy());
 
   let isOpen = false;
   let opener: HTMLElement | null = null;
@@ -255,6 +260,7 @@ export function createCommandSearch(root: HTMLElement | null, options: CommandSe
     openModal(dialog);
     // The rows grow with the panel: no entrance of their own on open.
     render(false);
+    area.refresh();
     input.focus();
     void fadeBackdrop(dialog, 'in');
     morphOpen(panel, from, { hideOrigin: true });

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