@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/css/controls/README.md

@@ -1,8 +1,6 @@
 # controls
 
-Controles en CSS puro con la línea de Stepbro, sobre la capa `--mk-*` de los tokens (cambian con el tema). Funcionan en HTML/Astro y React sin JavaScript.
-
-Origen: Stepbro usa Material Web; estos estilos reproducen sus ajustes (`tasks/source/frontend.css`): botones rellenos con `primary-container`, botones pequeños de 32 px con radio 12, campos rellenos `surface-container-high` con radio 16 y sin indicador inferior, chips de filtro en cápsula que toman `primary-container`, checkbox con radio 6, menús con radio 16.
+Controles en CSS puro sobre la capa `--mk-*` de los tokens (cambian con el tema). Funcionan en HTML/Astro y React sin JavaScript.
 
 ## Botón
 
@@ -64,12 +62,12 @@ El indicador lo mueve la receta `tabs`.
 
 Necesita la fuente Material Symbols Rounded (`@yewdiel21/motion-kit/css/fonts`). `--mk-icon-fill` (0–1) y `--mk-icon-weight` controlan los ejes.
 
-## Cristal (Dousan Miao)
+## Cristal
 
 ```html
 <button class="mk-button mk-glass">Copiar email</button>
 
-<!-- con la sombra de gradiente de Dousan -->
+<!-- con la sombra de gradiente -->
 <button class="mk-button mk-glass">
   <span class="mk-glass__shadow" aria-hidden="true"></span>
   Copiar email
@@ -78,28 +76,24 @@ Necesita la fuente Material Symbols Rounded (`@yewdiel21/motion-kit/css/fonts`).
 <span class="mk-chip mk-glass">Shipped</span>
 ```
 
-El cristal de Dousan en un solo elemento, sin JS: superficie translúcida con `backdrop-filter: blur(4px)` y sombras interiores; un aro óptico (`::before`, degradado cónico enmascarado al borde) que gira de −75° a −125° al pasar el ratón (0.5 s); un brillo especular (`::after`, `mix-blend-mode: screen`) que se desliza al pasar y se inclina al presionar (0.5 s `cubic-bezier(.25,1,.5,1)`). Al pasar, el blur casi desaparece y la sombra se ajusta (0.4 s). Al presionar, `scale(.95)` con el resorte de Dousan (Motion 400/10, en CSS con `linear()`: `--mk-ease-press`, `--mk-dur-press`).
+El cristal en un solo elemento, sin JS: superficie translúcida con `backdrop-filter: blur(4px)` y sombras interiores; un aro óptico (`::before`, degradado cónico enmascarado al borde) que gira de −75° a −125° al pasar el ratón (0.5 s); un brillo especular (`::after`, `mix-blend-mode: screen`) que se desliza al pasar y se inclina al presionar (0.5 s `cubic-bezier(.25,1,.5,1)`). Al pasar, el blur casi desaparece y la sombra se ajusta (0.4 s). Al presionar, `scale(.95)` con un resorte 400/10 (en CSS con `linear()`: `--mk-ease-press`, `--mk-dur-press`).
 
 - Funciona en cualquier elemento: botón, enlace, chip. Necesita algo detrás (foto, color, degradado) para que se note el cristal.
 - Claro u oscuro según el `color-scheme` del tema (`light-dark()`).
-- `<span class="mk-glass__shadow">` añade la sombra de gradiente de Dousan bajo el botón. En Dousan es una capa hermana detrás de la superficie; aquí va dentro y una máscara deja ver solo su parte inferior.
+- `<span class="mk-glass__shadow">` añade la sombra de gradiente bajo el botón. La sombra se coloca dentro de la superficie y una máscara deja ver solo su parte inferior.
 - Sin `backdrop-filter`, el fondo pasa a ser casi opaco.
-- Variables: `--mk-glass-blur` (4px), `--mk-glass-border` (ancho del aro), `--mk-glass-tint` (color del brillo), `--mk-glass-fg` (texto; por defecto `#121212` en claro y blanco en oscuro, como Dousan).
+- Variables: `--mk-glass-blur` (4px), `--mk-glass-border` (ancho del aro), `--mk-glass-tint` (color del brillo), `--mk-glass-fg` (texto; por defecto `#121212` en claro y blanco en oscuro).
 - Comprueba el contraste del texto sobre fondos claros, oscuros y fotos: el blur no sustituye a un color legible.
 
-Origen: `dousanmiao.com`, botón `glass-btn` (CSS público analizado en `REA - Dousan OFFFICE Siena/dousan`). No es refracción: es una composición de capas, como en el original.
-
-## Hamburguesa (Siena)
+## Hamburguesa
 
 ```html
 <button class="mk-burger" aria-expanded="false" aria-label="Menú"><span></span><span></span><span></span></button>
 ```
 
-Tres líneas que se pliegan en una X cuando `aria-expanded="true"`: las de fuera giran ±45° y se acortan a .8, la del centro desaparece; 1.1 s con la curva de Siena (`cubic-bezier(.19,1,.22,1)`, `--mk-ease-siena`) y 50 ms de desfase. Cambia `aria-expanded` tu app (o el menú que abre). Siempre con `aria-label`. Variables: `--mk-burger-size` (24px), `--mk-burger-line` (1.5px), `--mk-burger-gap` (5px).
+Tres líneas que se pliegan en una X cuando `aria-expanded="true"`: las de fuera giran ±45° y se acortan a .8, la del centro desaparece; 1.1 s con la curva `cubic-bezier(.19,1,.22,1)` y 50 ms de desfase. Cambia `aria-expanded` tu app (o el menú que abre). Siempre con `aria-label`. Variables: `--mk-burger-size` (24px), `--mk-burger-line` (1.5px), `--mk-burger-gap` (5px).
 
-Origen: `siena.film`, `[data-menu=iconline]`.
-
-## Botón con texto que rueda (Siena)
+## Botón con texto que rueda
 
 ```html
 <button class="mk-button mk-button--roll">
@@ -110,13 +104,23 @@ Origen: `siena.film`, `[data-menu=iconline]`.
 
 Al pasar el ratón, el texto sube (−150 %) y entra su copia (`data-text`), la flecha sale por la derecha y entra su copia (`data-icon`), y el botón se rellena con el color del texto (0.8 s, `--mk-ease-quint`, el texto 0.1 s después). En pantallas táctiles no cambia. Con movimiento reducido solo cambia el color.
 
-Origen: `siena.film`, `[data-btn=explore]`.
+## Estado
+
+```html
+<a class="mk-status" href="#contacto">
+  <span class="mk-status__dot"></span>
+  <span>Disponible para proyectos</span>
+  <span class="mk-status__sep" aria-hidden="true"></span>
+  <span class="mk-status__muted">Agenda una llamada</span>
+  <span class="mk-icon" aria-hidden="true">arrow_forward</span>
+</a>
+```
 
-## Squash y vibración (Stepbro)
+La píldora de DOVV Studio: superficie, borde suave y sombra. Si es enlace o botón, al pasar el ratón sube 1 px, crece su sombra y la flecha avanza 2 px (0.3 s). El punto verde tiene un halo que late (opacidad .6 → 0 y escala 1 → 2.6, 1.6 s `ease-out`, sin fin). Variantes `.mk-status__dot--busy` (ámbar) y `--off` (sin pulso); color propio con `--mk-status-color`. El punto funciona solo, fuera de la píldora. La píldora no parte líneas; en pantallas de 480 px o menos oculta `__sep` y `__muted`, así que pon lo esencial fuera de `__muted`.
 
-- `.mk-button` se aplasta un instante al recibir el foco por puntero (`scaleX(.95) scaleY(.9)`, 0.5 s `cubic-bezier(.37,1.42,.37,1)`). Stepbro lo hacía en todo `:focus`; aquí no rebota al tabular.
-- Un campo `.mk-field` vibra (±5 px, 0.3 s) cada vez que pasa a `aria-invalid="true"`.
+## Squash y vibración
 
-Origen: Stepbro `buttonClickAnimation` y `error-vibration`.
+- `.mk-button` se aplasta un instante al recibir el foco por puntero (`scaleX(.95) scaleY(.9)`, 0.5 s `cubic-bezier(.37,1.42,.37,1)`). El foco de teclado no produce rebote.
+- Un campo `.mk-field` vibra (±5 px, 0.3 s) cada vez que pasa a `aria-invalid="true"`.
 
 Todos quitan sus transiciones con `prefers-reduced-motion: reduce`.

package/src/css/controls/burger.css

@@ -1,4 +1,4 @@
-/* .mk-burger — Siena's menu icon: three lines that fold into an X when aria-expanded="true" (1.1 s, Siena's curve). */
+/* .mk-burger — menu icon: three lines that fold into an X when aria-expanded="true". */
 .mk-burger {
   --mk-burger-size: 24px;
   --mk-burger-line: 1.5px;

package/src/css/controls/button.css

@@ -1,4 +1,4 @@
-/* .mk-button — Stepbro capsules. Default is the tonal primary container Stepbro uses on filled buttons. */
+/* .mk-button — Capsule buttons. Filled buttons default to the tonal primary container. */
 .mk-button {
   --mk-button-bg: var(--mk-accent-soft);
   --mk-button-fg: var(--mk-on-accent-soft);
@@ -108,7 +108,7 @@
   font-size: 24px;
 }
 
-/* Stepbro's small buttons: 32 px, 16 px sides, radius 12. */
+/* small buttons: 32 px, 16 px sides, radius 12. */
 .mk-button--sm {
   --mk-button-height: 32px;
   --mk-button-padding: 16px;
@@ -131,7 +131,7 @@
   }
 }
 
-/* Stepbro's press squash (buttonClickAnimation), on pointer focus only so tabbing does not bounce. */
+/* press squash (buttonClickAnimation), on pointer focus only so tabbing does not bounce. */
 .mk-button:focus:not(:focus-visible) {
   animation: mk-press 0.5s cubic-bezier(0.37, 1.42, 0.37, 1);
 }
@@ -150,7 +150,7 @@
   }
 }
 
-/* Rolling label (Siena's Explore button): the text and its copy roll up, the arrow slides on, the fill inverts. */
+/* Rolling label: the text and its copy roll up, the arrow slides on, the fill inverts. */
 .mk-button--roll {
   overflow: hidden;
   background: transparent;

package/src/css/controls/checkbox.css

@@ -1,4 +1,4 @@
-/* .mk-checkbox — <input type="checkbox" class="mk-checkbox">: 18 px, radius 6 (Stepbro), check drawn in on-accent. */
+/* .mk-checkbox — <input type="checkbox" class="mk-checkbox">: 18 px, radius 6, check drawn in on-accent. */
 .mk-checkbox {
   position: relative;
   display: inline-grid;

package/src/css/controls/chip.css

@@ -1,4 +1,4 @@
-/* .mk-chip — capsules on container-high; a pressed filter chip takes the primary container (Stepbro filter chips). */
+/* .mk-chip — capsules on container-high; a pressed filter chip takes the primary container. */
 .mk-chip {
   position: relative;
   display: inline-flex;

package/src/css/controls/field.css

@@ -1,5 +1,5 @@
 /*
- * .mk-field — Stepbro's filled fields: container-high background, radius 16,
+ * .mk-field — filled fields: container-high background, radius 16,
  * no bottom indicator; focus draws a ring in the accent colour.
  * <label class="mk-field"><span class="mk-field__label">…</span><input>…<span class="mk-field__hint">…</span></label>
  */
@@ -77,7 +77,7 @@
   animation: mk-vibrate 0.3s;
 }
 
-/* Stepbro's error vibration: plays each time the field becomes invalid. */
+/* error vibration: plays each time the field becomes invalid. */
 @keyframes mk-vibrate {
   0% {
     transform: translate(0);

package/src/css/controls/glass.css

@@ -1,9 +1,9 @@
 /*
- * .mk-glass — Dousan Miao's glass in one element: a translucent surface with a
+ * .mk-glass — glass in one element: a translucent surface with a
  * 4 px backdrop blur, an optical ring (::before) whose conic highlight turns
  * from −75° to −125° on hover, and a specular band (::after) that slides and
  * tilts when pressed. <span class="mk-glass__shadow" aria-hidden="true"> inside
- * adds Dousan's gradient shadow. Colours follow the theme's scheme (light-dark()).
+ * adds gradient shadow. Colours follow the theme's scheme (light-dark()).
  */
 @property --mk-glass-angle-1 {
   syntax: '<angle>';
@@ -46,7 +46,7 @@
   isolation: isolate;
   border: 0;
   border-radius: 999vw;
-  /* Dousan: dark text on light, white on dark. */
+  /* dark text on light, white on dark. */
   color: var(--mk-glass-fg, light-dark(#121212, #fff));
   background: linear-gradient(-75deg, var(--mk-glass-edge), var(--mk-glass-middle), var(--mk-glass-edge));
   box-shadow: var(--mk-glass-shadow);
@@ -107,7 +107,7 @@
     --mk-glass-angle-2 0.5s var(--mk-ease-glass);
 }
 
-/* Dousan's gradient shadow (optional child). Only its lower part shows: it sits under the button. */
+/* gradient shadow (optional child). Only its lower part shows: it sits under the button. */
 .mk-glass__shadow {
   --mk-glass-cut: 2em;
   position: absolute;

package/src/css/controls/status.css

@@ -0,0 +1,63 @@
+/* status — "Available for new projects" pill and a live dot whose halo pulses (DOVV Studio: 1.6 s ease-out, scale 1 → 2.6). */
+.mk-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 16px 0 14px;
+  border-radius: 100px;
+  background: var(--mk-surface);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  text-decoration: none;
+  box-shadow: 0 0 0 1px var(--mk-outline-soft), 0 6px 20px -8px rgb(0 0 0 / 0.18);
+  transition: box-shadow 0.3s, transform 0.3s;
+}
+/* One line always: on phones the secondary half goes. */
+@media (max-width: 480px) {
+  .mk-status > :is(.mk-status__sep, .mk-status__muted) { display: none; }
+}
+a.mk-status:hover,
+button.mk-status:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 1px var(--mk-outline), 0 10px 24px -8px rgb(0 0 0 / 0.22);
+}
+.mk-status__sep { width: 1px; height: 14px; background: var(--mk-outline-soft); }
+.mk-status__muted { color: var(--mk-muted); }
+.mk-status > svg,
+.mk-status > .mk-icon { color: var(--mk-muted); transition: transform 0.3s; }
+.mk-status:hover > svg,
+.mk-status:hover > .mk-icon { transform: translateX(2px); }
+.mk-status__dot {
+  --mk-status-color: #16c847;
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--mk-status-color);
+}
+.mk-status__dot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: mk-status-pulse 1.6s ease-out infinite;
+}
+.mk-status__dot--busy { --mk-status-color: #f59e0b; }
+.mk-status__dot--off { --mk-status-color: var(--mk-muted); }
+.mk-status__dot--off::after { animation: none; }
+@keyframes mk-status-pulse {
+  0% { opacity: 0.6; transform: scale(1); }
+  100% { opacity: 0; transform: scale(2.6); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-status { transition: none; }
+  .mk-status__dot::after { animation: none; }
+}

package/src/css/default-theme.css

@@ -1,4 +1,4 @@
-/* Default palette (Stepbro "neogreen") with zero specificity: any [data-mk-theme] wins.
+/* Default palette  with zero specificity: any [data-mk-theme] wins.
    Generated by scripts/import-themes.mjs; do not edit. */
 :where(:root) {
   --md-sys-color-background: #f1fded;

package/src/css/effects/README.md

@@ -1,19 +1,17 @@
 # effects
 
-Efectos sueltos para cualquier elemento: las utilidades de animación de la hoja común de Stepbro y, de Dousan Miao, el blur progresivo, la flotación y el confeti de éxito, más un grano de película en CSS. Se usan con clases; dos funciones (`animate`, `leave`) las reproducen desde código.
-
-| Pieza | Qué hace | Origen |
-|---|---|---|
-| `.mk-anim-*` | Salidas, colapso, resaltado, sacudidas, aparición, barrido, entrada de progreso | Stepbro (hoja común): `item-out*`, `today-appt-item-out`, `animation-highlight-2`, `shake`, `asyncstate-fade`, `entry-animation-1`, `progress-indicator-in`; Dousan: `shake` fuerte |
-| `.mk-loading`, `.mk-loading--soft`, `.mk-shimmer` | Barridos de carga y brillo al pasar | Stepbro `animation-loading-1/2`, `hover-magic-1` |
-| `.mk-text-gradient`, `.mk-text-rainbow` | Texto con degradado en movimiento | Stepbro `text-gradient-pretty-animated`, `text-gradient-rainbow-animated` |
-| `.mk-frost` | Blur que crece hacia un borde | Dousan `bottom-gradient-blur` |
-| `.mk-float`, `.mk-float-group` | Vaivén lento de etiquetas | Dousan, etiquetas de cristal flotantes |
-| `.mk-grain` | Grano de película | Aproximación en CSS del ruido de Siena (allí es un shader) |
-| `.mk-success` + `confetti()` | Marca de éxito y confeti | Dousan, éxito del formulario |
-| `.mk-fade-x`, `.mk-fade-x-soft`, `.mk-fade-y` | Bordes que se desvanecen con máscara | Siena |
-
-Stepbro declara también `card-enter`, `animation-general-in`, `animation-general-in-2` y `search-result-item-in`, pero ninguna regla ni script los usa y no tienen duración: no se portan.
+Efectos sueltos para cualquier elemento: las utilidades de animación de la hoja común y,, el blur progresivo, la flotación y el confeti de éxito, más un grano de película en CSS. Se usan con clases; dos funciones (`animate`, `leave`) las reproducen desde código.
+
+| Pieza | Qué hace |
+|---|---|
+| `.mk-anim-*` | Salidas, colapso, resaltado, sacudidas, aparición, barrido, entrada de progreso |
+| `.mk-loading`, `.mk-loading--soft`, `.mk-shimmer` | Barridos de carga y brillo al pasar |
+| `.mk-text-gradient`, `.mk-text-rainbow` | Texto con degradado en movimiento |
+| `.mk-frost` | Blur que crece hacia un borde |
+| `.mk-float`, `.mk-float-group` | Vaivén lento de etiquetas |
+| `.mk-grain` | Grano de película |
+| `.mk-success` + `confetti()` | Marca de éxito y confeti |
+| `.mk-fade-x`, `.mk-fade-x-soft`, `.mk-fade-y` | Bordes que se desvanecen con máscara |
 
 ## Animaciones (`.mk-anim-*`)
 
@@ -25,7 +23,7 @@ Stepbro declara también `card-enter`, `animation-general-in`, `animation-genera
 | `collapse` | Se pliega (altura, padding y margen) mientras se desenfoca | 0.25 s |
 | `highlight` | Anillo interior de 4 px en `primary-container` que aparece y se va | 1 s |
 | `shake` | ±4 px | 0.5 s `cubic-bezier(.6,.6,.12,1.26)` |
-| `shake-strong` | ±10 px (Dousan, proyecto no compartible) | 0.4 s `ease-in-out` |
+| `shake-strong` | ±10 px | 0.4 s `ease-in-out` |
 | `fade` | Aparece | 0.3 s `ease` |
 | `wipe` | Un velo del color de la superficie se retira hacia la derecha | 0.7 s `cubic-bezier(.38,.49,0,1)` |
 | `progress-in` | Aparece con una curva que espera y luego llega | 1 s `cubic-bezier(.75,0,.41,-.06)` |
@@ -37,10 +35,10 @@ Stepbro declara también `card-enter`, `animation-general-in`, `animation-genera
 ```js
 import { animate, leave } from '@yewdiel21/motion-kit';
 
-await animate(field, 'shake');            // se puede repetir: vuelve a empezar
+await animate(field, 'shake'); // se puede repetir: vuelve a empezar
 await animate(card, 'highlight');
-await leave(row, 'out-left');             // anima y quita la fila
-await leave(row, 'collapse');             // se pliega y la quita
+await leave(row, 'out-left'); // anima y quita la fila
+await leave(row, 'collapse'); // se pliega y la quita
 await leave(row, 'out', { remove: false }); // anima y la deja con hidden
 ```
 
@@ -77,7 +75,7 @@ await leave(row, 'out', { remove: false }); // anima y la deja con hidden
 </div>
 ```
 
-Cinco capas con `backdrop-filter` de 1, 1, 1.5, 2 y 2.5 px, cada una con una máscara que empieza más abajo (0, 25, 45, 65 y 80 %): el desenfoque crece hacia el borde. `.mk-frost--top` lo pone arriba; `.mk-frost--fixed`, fijo a la ventana como en Dousan. Variables: `--mk-frost-height` (60px), `--mk-frost-strength` (multiplica los blurs).
+Cinco capas con `backdrop-filter` de 1, 1, 1.5, 2 y 2.5 px, cada una con una máscara que empieza más abajo (0, 25, 45, 65 y 80 %): el desenfoque crece hacia el borde. `.mk-frost--top` lo pone arriba; `.mk-frost--fixed`, fijo a la ventana. Variables: `--mk-frost-height` (60px), `--mk-frost-strength` (multiplica los blurs).
 
 Dentro de un contenedor que hace scroll, para que se quede en el borde visible: `.mk-frost { position: sticky; bottom: 0; margin-top: calc(var(--mk-frost-height, 60px) * -1) }` como último hijo.
 
@@ -93,7 +91,7 @@ React: `<Frost position="bottom" fixed={false} height={60} strength={1} />`.
 <span class="mk-float" style="--mk-float-y: 6px">Suelto</span>
 ```
 
-Cada hijo de `.mk-float-group` sigue uno de los cinco recorridos de Dousan (±3.5–5 px en 5–6.2 s). Al pasar crece a 1.05 y al presionar baja a .98 con el resorte de Dousan. Variables: `--mk-float-y`, `--mk-float-duration`.
+Cada hijo de `.mk-float-group` sigue uno de los cinco recorridos (±3.5–5 px en 5–6.2 s). Al pasar crece a 1.05 y al presionar baja a .98 con. Variables: `--mk-float-y`, `--mk-float-duration`.
 
 ## Grano
 
@@ -115,7 +113,7 @@ mark.hidden = false;
 const shot = confetti(button); // { stop(), finished }
 ```
 
-`.mk-success` crece de 0 y se endereza (−45°) con el resorte 260/18 de Dousan tras 0.15 s. `confetti(origen, { count, colors, container })`: 45 papelitos salen del centro del origen (2–8 px por frame, un poco hacia arriba), caen con gravedad .15, frenan .98, giran y se apagan (.015–.03 por frame). Sin `colors`, usa los del tema. El canvas no recibe puntero, está oculto a lectores de pantalla y se retira solo.
+`.mk-success` crece de 0 y se endereza (−45°) con el resorte 260/18 tras 0.15 s. `confetti(origen, { count, colors, container })`: 45 papelitos salen del centro del origen (2–8 px por frame, un poco hacia arriba), caen con gravedad .15, frenan .98, giran y se apagan (.015–.03 por frame). Sin `colors`, usa los del tema. El canvas no recibe puntero, está oculto a lectores de pantalla y se retira solo.
 
 ## Bordes que se desvanecen
 

package/src/css/effects/anim.css

@@ -1,4 +1,4 @@
-/* Stepbro's utility animations (shared stylesheet) and Dousan's strong shake. Replay them with animate(el, name). */
+/* utility animations (shared stylesheet) and strong shake. Replay them with animate(el, name). */
 .mk-anim-out {
   animation: mk-out 0.5s ease forwards;
 }

package/src/css/effects/fade.css

@@ -1,4 +1,4 @@
-/* Siena's edge masks: content fades out at the edges of a strip or a column. */
+/* edge masks: content fades out at the edges of a strip or a column. */
 .mk-fade-x {
   -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
   mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);

package/src/css/effects/float.css

@@ -1,4 +1,4 @@
-/* .mk-float — Dousan's floating tags: a slow bob (ease-in-out, infinite); children of .mk-float-group alternate Dousan's five paths. */
+/* .mk-float — floating tags: a slow bob (ease-in-out, infinite); children of .mk-float-group alternate five paths. */
 .mk-float,
 .mk-float-group > * {
   --mk-float-y: 4px;

package/src/css/effects/frost.css

@@ -1,4 +1,4 @@
-/* .mk-frost — Dousan's progressive blur: five backdrop-blur layers with staggered masks, so the blur grows toward the edge. */
+/* .mk-frost — progressive blur: five backdrop-blur layers with staggered masks, so the blur grows toward the edge. */
 .mk-frost {
   --mk-frost-strength: 1;
   position: absolute;

package/src/css/effects/grain.css

@@ -1,4 +1,4 @@
-/* .mk-grain — film grain (Siena's noise, .07) in CSS: an SVG turbulence tile that jumps between 8 places, like film. */
+/* .mk-grain — film grain  in CSS: an SVG turbulence tile that jumps between 8 places, like film. */
 :where(.mk-grain) {
   position: relative;
   isolation: isolate;

package/src/css/effects/loading.css

@@ -1,4 +1,4 @@
-/* Stepbro's loading sweeps (animation-loading-1 / -2) and hover shimmer (hover-magic-1). */
+/* loading sweeps (animation-loading-1 / -2) and hover shimmer (hover-magic-1). */
 .mk-loading {
   position: relative;
   overflow: hidden;

package/src/css/effects/success.css

@@ -1,4 +1,4 @@
-/* .mk-success — Dousan's success mark: grows and untwists on a 260/18 spring after 0.15 s. Pair it with confetti(). */
+/* .mk-success — success mark: grows and untwists on a 260/18 spring after 0.15 s. Pair it with confetti(). */
 .mk-success {
   display: inline-grid;
   place-items: center;

package/src/css/effects/text.css

@@ -1,4 +1,4 @@
-/* Stepbro's animated gradient text: a rainbow (6 s) and one in the theme's colours (8 s). */
+/* animated gradient text: a rainbow (6 s) and one in the theme's colours (8 s). */
 .mk-text-rainbow,
 .mk-text-gradient {
   -webkit-background-clip: text;

package/src/css/fonts.css

@@ -1,3 +1,3 @@
-/* Stepbro's fonts from Google Fonts: DM Sans (variable), Geist Mono, Material Symbols Rounded (FILL/wght axes).
+/* fonts from Google Fonts: DM Sans (variable), Geist Mono, Material Symbols Rounded (FILL/wght axes).
    Optional: without it the tokens fall back to system fonts. */
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist+Mono:wght@100..900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

package/src/css/states.css

@@ -13,7 +13,7 @@
     visibility: hidden;
   }
 
-  /* iyo: the island drops in from above, the fill-text starts dimmed. */
+  /* the island drops in from above, the fill-text starts dimmed. */
   .mk-js:not(.mk-failed) :is(.mk-island, mk-island):not([data-mk-ready]) .mk-island__shell {
     visibility: hidden;
   }

package/src/css/themes/black-green.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "black-green" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "black-green": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="black-green"] {
   color-scheme: light;

package/src/css/themes/black.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "black" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "black": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="black"] {
   color-scheme: light;

package/src/css/themes/blue.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "blue": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="blue"] {
   color-scheme: light;

package/src/css/themes/brown.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "brown" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "brown": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="brown"] {
   color-scheme: light;

package/src/css/themes/cold-blue.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "cold-blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "cold-blue": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="cold-blue"] {
   color-scheme: light;

package/src/css/themes/funny.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "funny" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "funny": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="funny"] {
   color-scheme: light;

package/src/css/themes/gray.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "gray" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "gray": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="gray"] {
   color-scheme: light;

package/src/css/themes/green.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "green" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "green": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="green"] {
   color-scheme: light;

package/src/css/themes/modern-1.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "modern-1" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "modern-1": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="modern-1"] {
   color-scheme: light;

package/src/css/themes/neogreen.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "neogreen" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "neogreen": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="neogreen"] {
   color-scheme: light;

package/src/css/themes/new.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "new" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "new": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="new"] {
   color-scheme: light;

package/src/css/themes/new2.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "new2" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "new2": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="new2"] {
   color-scheme: light;

package/src/css/themes/oled.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "oled" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "oled": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="oled"] {
   color-scheme: light;

package/src/css/themes/orange.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "orange" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "orange": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="orange"] {
   color-scheme: light;

package/src/css/themes/pastel-pink.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "pastel-pink" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "pastel-pink": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="pastel-pink"] {
   color-scheme: light;

package/src/css/themes/pink.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "pink" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "pink": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="pink"] {
   color-scheme: light;

package/src/css/themes/purple.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "purple" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "purple": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="purple"] {
   color-scheme: light;

package/src/css/themes/red.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "red" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "red": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="red"] {
   color-scheme: light;

package/src/css/themes/super-blue.css

@@ -1,4 +1,4 @@
-/* Stepbro theme "super-blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+/* Theme "super-blue": light and dark color palettes.
    Generated by scripts/import-themes.mjs; do not edit. */
 [data-mk-theme="super-blue"] {
   color-scheme: light;