@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/css/controls/README.md

@@ -0,0 +1,122 @@
+# 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.
+
+## Botón
+
+```html
+<button class="mk-button">Guardar</button>
+<button class="mk-button mk-button--primary">Crear</button>
+<button class="mk-button mk-button--tonal mk-button--sm">Filtrar</button>
+<button class="mk-button mk-button--outlined">Cancelar</button>
+<button class="mk-button mk-button--text">Ver más</button>
+<button class="mk-button mk-button--icon" aria-label="Ajustes"><span class="mk-icon">settings</span></button>
+```
+
+Variables: `--mk-button-bg`, `--mk-button-fg`, `--mk-button-height` (40), `--mk-button-padding` (24), `--mk-button-radius` (cápsula). Capa de estado Material: 8 % al pasar el ratón, 10 % con foco o pulsado.
+
+## Campo
+
+```html
+<label class="mk-field">
+  <span class="mk-field__label">Nombre</span>
+  <input placeholder="Proyecto nuevo">
+  <span class="mk-field__hint">Máximo 40 caracteres</span>
+</label>
+```
+
+Vale para `input`, `textarea` y `select`. `aria-invalid="true"` lo pinta con `error-container` y la ayuda en `error`. Variables: `--mk-field-bg`, `--mk-field-radius`.
+
+## Switch y checkbox
+
+```html
+<input type="checkbox" role="switch" class="mk-switch" aria-label="Notificaciones">
+<label><input type="checkbox" class="mk-checkbox"> Recordarme</label>
+```
+
+## Chip
+
+```html
+<button class="mk-chip mk-chip--filter" aria-pressed="true">Hoy</button>
+<span class="mk-chip mk-chip--input">Diseño <button class="mk-chip__remove" aria-label="Quitar">×</button></span>
+```
+
+## Segmentado
+
+```html
+<div class="mk-segmented" data-mk="tabs">
+  <button data-mk-tab aria-selected="true">Día</button>
+  <button data-mk-tab>Semana</button>
+  <span data-mk-indicator></span>
+</div>
+```
+
+El indicador lo mueve la receta `tabs`.
+
+## Icono
+
+```html
+<span class="mk-icon">home</span>
+<span class="mk-icon mk-icon--fill">favorite</span>
+```
+
+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)
+
+```html
+<button class="mk-button mk-glass">Copiar email</button>
+
+<!-- con la sombra de gradiente de Dousan -->
+<button class="mk-button mk-glass">
+  <span class="mk-glass__shadow" aria-hidden="true"></span>
+  Copiar email
+</button>
+
+<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`).
+
+- 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.
+- 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).
+- 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)
+
+```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).
+
+Origen: `siena.film`, `[data-menu=iconline]`.
+
+## Botón con texto que rueda (Siena)
+
+```html
+<button class="mk-button mk-button--roll">
+  <span class="mk-roll" data-text="Explorar">Explorar</span>
+  <span class="mk-roll__arrow"><span class="mk-icon" data-icon="arrow_forward">arrow_forward</span></span>
+</button>
+```
+
+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]`.
+
+## Squash y vibración (Stepbro)
+
+- `.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"`.
+
+Origen: Stepbro `buttonClickAnimation` y `error-vibration`.
+
+Todos quitan sus transiciones con `prefers-reduced-motion: reduce`.

package/src/css/controls/burger.css

@@ -0,0 +1,67 @@
+/* .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 {
+  --mk-burger-size: 24px;
+  --mk-burger-line: 1.5px;
+  --mk-burger-gap: 5px;
+  display: inline-grid;
+  place-items: center;
+  width: calc(var(--mk-burger-size) + 16px);
+  height: calc(var(--mk-burger-size) + 16px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mk-burger > span {
+  grid-area: 1 / 1;
+  width: var(--mk-burger-size);
+  height: var(--mk-burger-line);
+  border-radius: var(--mk-burger-line);
+  background: currentColor;
+  transition: transform 1.1s var(--mk-ease-siena);
+}
+
+.mk-burger > span:nth-child(1) {
+  transform: translate3d(0, calc(var(--mk-burger-gap) * -1), 0);
+  transition-delay: 0s;
+}
+
+.mk-burger > span:nth-child(2) {
+  transform: translateZ(0);
+  transition-delay: 0.05s;
+}
+
+.mk-burger > span:nth-child(3) {
+  transform: translate3d(0, var(--mk-burger-gap), 0);
+  transition-delay: 0s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(1) {
+  transform: translateZ(0) rotate(-45deg) scaleX(0.8);
+  transition-delay: 0.05s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(2) {
+  transform: translateZ(0) scaleX(0);
+  transition-delay: 0s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(3) {
+  transform: translateZ(0) rotate(45deg) scaleX(0.8);
+  transition-delay: 0.05s;
+}
+
+.mk-burger:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-burger > span {
+    transition: none;
+  }
+}

package/src/css/controls/button.css

@@ -0,0 +1,226 @@
+/* .mk-button — Stepbro capsules. Default is the tonal primary container Stepbro uses on filled buttons. */
+.mk-button {
+  --mk-button-bg: var(--mk-accent-soft);
+  --mk-button-fg: var(--mk-on-accent-soft);
+  --mk-button-height: 40px;
+  --mk-button-padding: 24px;
+  --mk-button-radius: var(--mk-radius-full);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--mk-button-height);
+  padding: 0 var(--mk-button-padding);
+  border: 0;
+  border-radius: var(--mk-button-radius);
+  background: var(--mk-button-bg);
+  color: var(--mk-button-fg);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.2s var(--mk-ease-signature),
+    border-radius 0.3s var(--mk-ease-signature),
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+/* Material state layer: the label colour at 8 % on hover, 10 % on focus and press. */
+.mk-button::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: currentColor;
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+@media (hover: hover) {
+  .mk-button:hover::before {
+    opacity: 0.08;
+  }
+}
+
+.mk-button:focus-visible::before,
+.mk-button:active::before {
+  opacity: 0.1;
+}
+
+.mk-button:active {
+  transform: scale(0.97);
+}
+
+.mk-button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-button:disabled,
+.mk-button[aria-disabled='true'] {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.mk-button .mk-icon {
+  font-size: 18px;
+}
+
+.mk-button--primary {
+  --mk-button-bg: var(--mk-accent);
+  --mk-button-fg: var(--mk-on-accent);
+}
+
+.mk-button--tonal {
+  --mk-button-bg: var(--mk-secondary-soft);
+  --mk-button-fg: var(--mk-on-secondary-soft);
+}
+
+.mk-button--outlined {
+  --mk-button-bg: transparent;
+  --mk-button-fg: var(--mk-accent);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+.mk-button--text {
+  --mk-button-bg: transparent;
+  --mk-button-fg: var(--mk-accent);
+  --mk-button-padding: 12px;
+}
+
+.mk-button--icon {
+  --mk-button-padding: 0;
+  width: var(--mk-button-height);
+  aspect-ratio: 1;
+}
+
+.mk-button--icon .mk-icon {
+  font-size: 24px;
+}
+
+/* Stepbro's small buttons: 32 px, 16 px sides, radius 12. */
+.mk-button--sm {
+  --mk-button-height: 32px;
+  --mk-button-padding: 16px;
+  --mk-button-radius: var(--mk-radius-sm);
+}
+
+.mk-button--lg {
+  --mk-button-height: 48px;
+  --mk-button-padding: 32px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-button,
+  .mk-button::before {
+    transition: none;
+  }
+
+  .mk-button:active {
+    transform: none;
+  }
+}
+
+/* Stepbro's 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);
+}
+
+@keyframes mk-press {
+  0% {
+    transform: scaleX(1) scaleY(1);
+  }
+
+  50% {
+    transform: scaleX(0.95) scaleY(0.9);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* Rolling label (Siena's Explore button): the text and its copy roll up, the arrow slides on, the fill inverts. */
+.mk-button--roll {
+  overflow: hidden;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px currentColor;
+  color: var(--mk-text);
+  transition:
+    background-color 0.8s var(--mk-ease-quint),
+    color 0.8s var(--mk-ease-quint) 0.1s;
+}
+
+.mk-button--roll::before {
+  display: none;
+}
+
+.mk-roll {
+  position: relative;
+  display: inline-block;
+  transition: transform 0.8s var(--mk-ease-quint) 0.1s;
+}
+
+.mk-roll::after {
+  position: absolute;
+  inset: 150% 0 auto;
+  content: attr(data-text);
+}
+
+.mk-roll__arrow {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.mk-roll__arrow > * {
+  position: relative;
+  transition: transform 0.8s var(--mk-ease-quint);
+}
+
+.mk-roll__arrow > *::before {
+  position: absolute;
+  right: 100%;
+  content: attr(data-icon);
+}
+
+@media (hover: hover) {
+  .mk-button--roll:hover {
+    background-color: var(--mk-text);
+    color: var(--mk-bg);
+  }
+
+  .mk-button--roll:hover .mk-roll {
+    transform: translateY(-150%);
+  }
+
+  .mk-button--roll:hover .mk-roll__arrow > * {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-button:focus:not(:focus-visible) {
+    animation: none;
+  }
+
+  .mk-roll,
+  .mk-roll__arrow > * {
+    transition: none;
+  }
+
+  .mk-button--roll:hover .mk-roll,
+  .mk-button--roll:hover .mk-roll__arrow > * {
+    transform: none;
+  }
+}

package/src/css/controls/checkbox.css

@@ -0,0 +1,53 @@
+/* .mk-checkbox — <input type="checkbox" class="mk-checkbox">: 18 px, radius 6 (Stepbro), check drawn in on-accent. */
+.mk-checkbox {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px var(--mk-outline);
+  cursor: pointer;
+  appearance: none;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.mk-checkbox::before {
+  width: 12px;
+  height: 12px;
+  background: var(--mk-on-accent);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  content: '';
+  transform: scale(0);
+  transition: transform 0.2s var(--mk-ease-signature);
+}
+
+.mk-checkbox:checked {
+  background: var(--mk-accent);
+  box-shadow: none;
+}
+
+.mk-checkbox:checked::before {
+  transform: scale(1);
+}
+
+.mk-checkbox:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-checkbox:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-checkbox,
+  .mk-checkbox::before {
+    transition: none;
+  }
+}

package/src/css/controls/chip.css

@@ -0,0 +1,85 @@
+/* .mk-chip — capsules on container-high; a pressed filter chip takes the primary container (Stepbro filter chips). */
+.mk-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  isolation: isolate;
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+.mk-chip::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: currentColor;
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+@media (hover: hover) {
+  .mk-chip:hover::before {
+    opacity: 0.08;
+  }
+}
+
+.mk-chip:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-chip .mk-icon {
+  font-size: 18px;
+}
+
+.mk-chip--filter[aria-pressed='true'] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft);
+}
+
+/* Input chip: the remove button sits at the end. */
+.mk-chip--input {
+  padding-right: 6px;
+}
+
+.mk-chip__remove {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.mk-chip__remove:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-chip,
+  .mk-chip::before {
+    transition: none;
+  }
+}

package/src/css/controls/field.css

@@ -0,0 +1,124 @@
+/*
+ * .mk-field — Stepbro's 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>
+ */
+.mk-field {
+  --mk-field-bg: var(--mk-surface-4);
+  --mk-field-radius: var(--mk-radius-md);
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mk-field__label {
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+
+.mk-field :is(input, textarea, select) {
+  width: 100%;
+  min-height: 56px;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  border-radius: var(--mk-field-radius);
+  background-color: var(--mk-field-bg);
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  outline: none;
+  appearance: none;
+  transition:
+    box-shadow 0.2s ease,
+    background-color 0.25s ease;
+}
+
+.mk-field textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+
+/* A caret drawn with gradients so it follows the text colour. */
+.mk-field select {
+  padding-right: 44px;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 22px) 50%,
+    calc(100% - 17px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+}
+
+.mk-field :is(input, textarea, select)::placeholder {
+  color: var(--mk-muted);
+  opacity: 0.7;
+}
+
+.mk-field :is(input, textarea, select):focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+.mk-field :is(input, textarea, select):disabled {
+  opacity: 0.38;
+}
+
+.mk-field :is(input, textarea, select)[aria-invalid='true'] {
+  background-color: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+  animation: mk-vibrate 0.3s;
+}
+
+/* Stepbro's error vibration: plays each time the field becomes invalid. */
+@keyframes mk-vibrate {
+  0% {
+    transform: translate(0);
+  }
+
+  20% {
+    transform: translate(-5px);
+  }
+
+  40% {
+    transform: translate(5px);
+  }
+
+  60% {
+    transform: translate(-5px);
+  }
+
+  80% {
+    transform: translate(5px);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+.mk-field__hint {
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-body-small-font);
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+
+.mk-field:has([aria-invalid='true']) .mk-field__hint {
+  color: var(--mk-error);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-field :is(input, textarea, select) {
+    transition: none;
+    animation: none;
+  }
+}